Zustand is the simplest and most efficient state manager for React, with a tiny bundle size and zero boilerplate. In this video, we break down the best practices for using Zustand, from setting up your store correctly to preventing unnecessary renders. You'll learn how to use atomic selectors, encapsulated hooks, middleware, and more to write scalable and maintainable Zustand stores.

📌 Topics Covered:
How Zustand works and why it’s better than Redux
The right way to structure Zustand stores
Preventing unnecessary component re-renders
Zustand’s atomic selectors for better performance
Best practices for actions and state separation
Using middleware to enhance Zustand
How to scale Zustand in a large React project

🔗Links:
Zustand Docs: github.com/pmndrs/zustand
Zustand Middleware Guide: zustand.docs.pmnd.rs/integrations/immer-middleware

🌄 Sources:
tkdodo.eu/blog/working-with-zustand
medium.com/@nfailla93/zustand-in-react-dos-and-don…
github.com/pmndrs/zustand?tab=readme-ov-file#best-…

❤️ More about us
Radically better observability stack: betterstack.com/
Written tutorials: betterstack.com/community/
Example projects: github.com/BetterStackHQ

📱 Socials
Twitter: twitter.com/betterstackhq
Instagram: www.instagram.com/betterstackhq/
TikTok: www.tiktok.com/@betterstack
LinkedIn: www.linkedin.com/company/betterstack

📌 Chapters:
0:00 Intro
0:10 How to Pronounce Zustand
0:14 What is Zustand
0:27 Zustand in 20 seconds
1:08 Only Export Custom Hooks
1:51 Atomic, Stable Selectors
2:47 Separate Actions from State
3:40 Model Actions as Events
4:01 Using Multiple Stores
4:34 Middlewares (Immer, Persist, Devt