React Native for beginners - Global State Management with Zustand in React Native | DEVember Day 17

Day 17 of #DEVember! In this tutorial, we'll learn about managing global state in React Native using Zustand! We'll delve into how to seamlessly integrate Zustand into our React Native project and use it to manage the global state of a To-Do app. You’ll also learn about persisting data on the device for a consistent user experience. Join us in our continued effort to support education through our "Education for Children" fundraiser, and let's build something amazing together! ✨More info about the event and the fundraiser: https://notjust.dev/events/DEVember 🌟DEVember Day 17: https://www.notjust.dev/projects/devember/day17 If you have ideas of features, topics or apps you would like me to cover during #DEVember, you can submit them on our 💡Idea Board: https://github.com/notJust-dev/DEVember/discussions/categories/ideas Your contribution helps offer essential learning resources to underprivileged children, ensuring every child has the chance to learn and grow. 💝 Incentives for Donations: $25 - Your name in every video $50 - Personal shout-out $500 - Pick an Idea to Build $1000 - Brand shout-out + ad-read $3000 - Tutorial with your Tool/Product/Service 📚 Today's Agenda: - Introduction to Zustand and Global State Management - Setting Up Zustand in React Native - Building a To-Do App State with Zustand - Implementing Data Persistence on Device - Managing and Updating State Globally - Testing and Debugging Zustand Integration - Optimizing State Management - Outro ❗Try our FREE 4-day Masterclass on notJust.Academy: https://assets.notjust.dev/masterclass/?utm_source=youtube&utm_medium=livestream&utm_content=DEVember 📚 Enroll NOW in The Full-Stack Mobile Developer course and don’t miss out on your chance to become a 6-figure dev! Check out what our successful students are saying about their experience: https://academy.notjust.dev/?utm_source=youtube&utm_medium=livestream&utm_content=DEVember 💬 Join the notJust Development gang and let's build together: Twitter: https://twitter.com/VadimNotJustDev Instagram: https://www.instagram.com/VadimNotJustDev Facebook: https://www.facebook.com/notjustdev LinkedIn: https://www.linkedin.com/in/vadimsavin Discord: https://discord.gg/VpURUN2 Timecodes: 0:00 Introduction to Global State Management with Zustand 0:20 Overview of DEVember and Fundraiser for Children's Education 1:50 Preparing for Zustand Integration in React Native 2:32 Reviewing the Application and Codebase 3:38 Setting Up the New Branch for Zustand Integration 4:45 Discussing React Context and Its Limitations 6:09 Introduction to Zustand and Its Principles 6:55 Preparing the Project for Zustand Implementation 7:49 Organizing Components for Zustand Integration 8:35 Updating Component Imports 9:27 Overview of ToDo Page and Components 10:25 Modifying ToDo Screen to Use Zustand Store 11:55 Creating and Integrating the Zustand Store 15:45 Initializing Zustand Store with Dummy Tasks 18:28 Implementing Functions in Zustand Store 20:38 Learning and Debugging Zustand Store Setup 22:45 Adding Task Functionality with Zustand 27:30 Integrating Task Deletion and Update Functions in Zustand Store 29:19 Testing Task Deletion and Updating Functions 30:13 Integrating Changes Finished Function with Zustand 33:12 Finalizing Task Store with Zustand 34:01 Implementing Search and Filter Functionality 37:14 Discussing Zustand Store Computed Properties 38:18 Implementing Computed State in Zustand Store 41:21 Creating Derived State Variables in Zustand Store 43:08 Integrating Derived State in Components 45:19 Adjusting Computed State Functions 46:25 Finalizing Computed State Integration 47:31 Debugging TypeScript Issues in Zustand Store 48:55 Solving TypeScript and Store Integration Problems 50:46 Typing Zustand Store for TypeScript Compatibility 52:48 Finalizing TypeScript Integration in Zustand Store 53:34 Adjusting Function Types in Zustand Store 54:18 Testing Typed Zustand Store in Components 55:59 Discussing Data Persistence in Zustand 56:46 Implementing Data Persistence with Zustand 58:03 Integrating AsyncStorage with Zustand Persist 1:03:01 Finalizing Persist Setup with AsyncStorage 1:04:08 Testing Data Persistence with Zustand 1:05:27 Comparing Zustand with React Context 1:08:05 Analyzing Component Rerenders with Zustand vs React Context 1:17:42 Comparing Performance of Zustand and React Context 1:24:20 Final Analysis and Conclusion on Zustand Integration 1:26:10 Outro Disclaimer: This build is for educational purposes only. All views, opinions, and technology choices expressed in this video are my own and do not represent the views, opinions, or technology choices of any entity I have been, am now, or will be affiliated with. #notjustdev #ReactNative