Zustand State Management
Zustand store, create, selectors, actions, middleware, devtools, persistence
1Zustand āļāļ·āļāļāļ°āđāļĢ?
Zustand āļāļ·āļāļāļ°āđāļĢ?
āļāļģāļāļāļ
Zustand āđāļāđāļāđāļĨāļāļĢāļēāļĢāļĩ state management āđāļāļāļĄāļīāļāļīāļĄāļāļĨāļŠāļģāļŦāļĢāļąāļ React āļāļĩāđāđāļĄāđāļāđāļāļāđāļāđ Provider āļāđāļēāļāļāļēāļ Redux āļŦāļĢāļ·āļ Context API āļĄāļąāļāļĄāļĩ API āļāļĩāđāđāļĢāļĩāļĒāļāļāđāļēāļĒāļāļ hooks āđāļĨāļ°āļāļąāļāļāđāļāļąāļ create() āļāļĢāđāļāļĄ bundle size āļāļĩāđāđāļĨāđāļāļĄāļēāļ (āļāđāļāļĒāļāļ§āđāļē 1KB) Zustand āļāđāļ§āļĒāļāļąāļāļāļēāļĢ state āđāļāļ global āđāļāđāđāļāļĒāđāļĄāđāļāđāļāļāļĄāļĩāļāļ§āļēāļĄāļāļąāļāļāđāļāļāļāļēāļāļŠāļāļēāļāļąāļāļĒāļāļĢāļĢāļĄāļāļāļ Redux āđāļĨāļ°āļŦāļĨāļĩāļāđāļĨāļĩāđāļĒāļāļāļąāļāļŦāļēāļāđāļēāļāļāļĢāļ°āļŠāļīāļāļāļīāļ āļēāļāļāļāļ Context API
2āļāļ°āļŠāļĢāđāļēāļ Zustand store āļāļ·āđāļāļāļēāļāđāļāđāļāļĒāđāļēāļāđāļĢ?
āļāļ°āļŠāļĢāđāļēāļ Zustand store āļāļ·āđāļāļāļēāļāđāļāđāļāļĒāđāļēāļāđāļĢ?
āļāļģāļāļāļ
āļāļąāļāļāđāļāļąāļ create() āđāļāđāļŠāļģāļŦāļĢāļąāļāļāļēāļĢāļŠāļĢāđāļēāļ Zustand store āđāļāļĒāļĢāļąāļ callback function āļāļĩāđāđāļāđāļĢāļąāļ set āđāļĨāļ° get āđāļāđāļāļāļēāļĢāļēāļĄāļīāđāļāļāļĢāđ āļāđāļ§āļĒāđāļŦāđāļāļļāļāļāļģāļŦāļāļ state āđāļĢāļīāđāļĄāļāđāļāđāļĨāļ° actions āđāļāđ store āļāļĩāđāļŠāđāļāļāļĨāļąāļāļĄāļēāđāļāđāļ React hook āļāļĩāđāļŠāļēāļĄāļēāļĢāļāđāļāđāđāļāđāđāļāļĒāļāļĢāļāđāļāļāļāļĄāđāļāđāļāļāļāđ āļ§āļīāļāļĩāļāļĩāđāļāđāļ§āļĒāļĨāļāļāļ§āļēāļĄāļāļģāđāļāđāļāļāļāļ boilerplate āđāļāđāļ action creators āļŦāļĢāļ·āļ reducers āļāļēāļ Redux
3āļāļ°āđāļāđāļēāļāļķāļ state āļāļāļ Zustand store āđāļāļāļāļĄāđāļāđāļāļāļāđāđāļāđāļāļĒāđāļēāļāđāļĢ?
āļāļ°āđāļāđāļēāļāļķāļ state āļāļāļ Zustand store āđāļāļāļāļĄāđāļāđāļāļāļāđāđāļāđāļāļĒāđāļēāļāđāļĢ?
āļāļģāļāļāļ
store āļāļĩāđāļŠāļĢāđāļēāļāļāđāļ§āļĒ create() āļāļ°āļŠāđāļāļāļĨāļąāļ React hook āļāļĩāđāļŠāļēāļĄāļēāļĢāļāđāļĢāļĩāļĒāļāđāļāđāđāļāđāđāļāļĒāļāļĢāļāđāļ functional component hook āļāļĩāđāļĢāļąāļ selector āđāļŠāļĢāļīāļĄāđāļāļ·āđāļāļāļķāļāđāļāļāļēāļ°āļŠāđāļ§āļāļāļāļ state āļāļĩāđāļāđāļāļāļāļēāļĢ āļŦāļēāļāđāļĄāđāļĄāļĩ selector āļāļ°āļŠāđāļāļāļĨāļąāļ state āļāļąāđāļāļŦāļĄāļ āđāļāđāļāļēāļāļāļģāđāļŦāđāđāļāļīāļ re-render āļāļĩāđāđāļĄāđāļāļģāđāļāđāļ āđāļāļ§āļāļēāļ hook-first āļāļģāđāļŦāđ Zustand āđāļāđāļāļēāļāļāđāļēāļĒāļŠāļģāļŦāļĢāļąāļāļāļąāļāļāļąāļāļāļē React āļŠāļĄāļąāļĒāđāļŦāļĄāđ
āļāļāļāļēāļāļāļāļ selector āđāļ Zustand āļāļ·āļāļāļ°āđāļĢ?
āļāļ°āļŦāļĨāļĩāļāđāļĨāļĩāđāļĒāļ re-render āļāļĩāđāđāļĄāđāļāļģāđāļāđāļāļāđāļ§āļĒ selector āđāļāđāļāļĒāđāļēāļāđāļĢ?
+15 āļāļģāļāļēāļĄāļŠāļąāļĄāļ āļēāļĐāļāđ
āļŦāļąāļ§āļāđāļāļŠāļąāļĄāļ āļēāļĐāļāđ React / Next.js āļāļ·āđāļāđ
āļāļ·āđāļāļāļēāļ JavaScript
āļāļ·āđāļāļāļēāļ React
React Hooks
āļ§āļāļāļĢāļāļĩāļ§āļīāļāļāļāļ component
React Router
āļāļēāļĢāļāļąāļāļāļēāļĢ state āļāđāļ§āļĒ Context
āļāļāļĢāđāļĄāđāļĨāļ° Controlled Components
āļāļēāļĢāļāļķāļāļāđāļāļĄāļđāļĨāđāļĨāļ° API
React Query (TanStack Query)
Styling & CSS-in-JS
āļāļ·āđāļāļāļēāļ Next.js
TypeScript āļāļąāļ React
āļāļēāļĢāļāļķāļāļāđāļāļĄāļđāļĨ Next.js
Server Actions āļāļāļ Next.js
āļāļēāļĢāļāļģāļŦāļāļāđāļŠāđāļāļāļēāļāđāļĨāļ°āļāļēāļĢāļāļģāļāļēāļāđāļ Next.js
API Routes āđāļ Next.js
Metadata & SEO āđāļ Next.js
Middleware āđāļĨāļ° Auth āđāļ Next.js
āļāļēāļĢāļāļāļŠāļāļ React
āļāļēāļĢāđāļāļīāđāļĄāļāļĢāļ°āļŠāļīāļāļāļīāļ āļēāļ React
Error Boundaries & āļāļēāļĢāļāļąāļāļāļēāļĢāļāđāļāļāļīāļāļāļĨāļēāļ
Advanced React Patterns
āļāļĩāđāļāļāļĢāđāļāļąāđāļāļŠāļđāļāļāļāļ Next.js
āļāļēāļĢ Deploy & Production āļāļāļ Next.js
Architecture & Design Patterns
React Server Components
āļāļēāļĢāđāļāļĨāļ āļēāļĐāļē Next.js
React āļāļ§āļēāļĄāļāļĨāļāļāļ āļąāļĒ & āđāļāļ§āļāļāļīāļāļąāļāļīāļāļĩāđāļāļĩāļāļĩāđāļŠāļļāļ
āđāļāļĩāđāļĒāļ§āļāļēāļ React / Next.js āļŠāļģāļŦāļĢāļąāļāļāļēāļĢāļŠāļąāļĄāļ āļēāļĐāļāđāļāļĢāļąāđāļāļāļąāļāđāļ
āđāļāđāļēāļāļķāļāļāļģāļāļēāļĄāļāļąāđāļāļŦāļĄāļ flashcards āđāļāļāļāļāļŠāļāļāđāļāļāļāļīāļ āđāļāļāļāļķāļāļŦāļąāļ code review āđāļĨāļ°āļāļąāļ§āļāļģāļĨāļāļāļŠāļąāļĄāļ āļēāļĐāļāđ
āđāļĢāļīāđāļĄāđāļāđāļāļĢāļĩ