filmov
tv
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:
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:
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:
📚 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:
💬 Join the notJust Development gang and let's build together:
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
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:
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:
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:
📚 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:
💬 Join the notJust Development gang and let's build together:
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
0:19:27
Zustand - Complete Tutorial
0:51:17
Global State Management in NextJs 14 Using Zustand
0:13:33
State Managers Are Making Your Code Worse In React
0:04:01
This Makes State Management so Much Easier
0:30:12
Zustand Beginner Tutorial - Learn React State Management With Zustand
0:00:39
React State Management: Zustand Instead Of Redux?
1:26:36
Global State Management with Zustand in React Native | DEVember Day 17
0:10:31
Add global state management to your React application with Zustand | TechHarvesting
0:03:30
React + Express | State Management with Zustand
0:23:35
The Most Underrated State Management Tool in React
0:04:35
React js Zustand : Super simple global state
0:04:34
React Query is Secretly an Amazing State Manager
1:15:24
Zustand React State Management Course (Simple Redux Alternative)
0:10:28
Jotai React - Better Global State Management
0:08:06
How to use zustand for global state management in any react framework in typescript.
1:10:21
Zustand Tutorial for Beginners - The Only Course You Will Ever Need
0:02:33
React Query in 100 Seconds
0:41:08
NextJS + State Management = Good Idea???
0:10:24
Zustand и React query. State management в React без боли
0:12:07
This Library Makes State Management So Much Easier
0:29:17
What is my favorite React state management library
0:14:31
Global State in React 🔹 React Zustand Tutorial (German)
0:02:33
Redux in 100 Seconds
0:34:05
Global State Management: React Zustand with Todo List Example & Redux Comparison
Комментарии