Understanding Zustand
State management often feels too complex.
You know how to use React useState. You know how to pass props. You know how to lift state up.
But everything breaks when your app grows. You start passing data through components that do not need it. This is prop drilling. It makes your code messy and hard to maintain.
Zustand solves this. It gives your app a shared state outside of your React components.
Think of it this way:
Without Zustand: Component A passes props to B, B passes props to C, and C passes props to D.
With Zustand: Every component talks directly to a central store. No middleman. No prop drilling.
A Zustand store consists of two things:
- State: Your data.
- Actions: Functions that change your data.
That is all it is.
Zustand is fast because it only re-renders components that use the specific data that changed.
If you need your data to survive a page refresh, use localStorage. Since localStorage only stores strings, you must use JSON.stringify to save objects and JSON.parse to read them.
Here is a simple way to structure an auth store:
- Store the user and token in localStorage.
- Use a login function to update the store and the browser storage.
- Use a logout function to clear both.
How does it compare to Redux?
Redux requires dispatchers and reducers. It involves a lot of boilerplate code. Zustand lets you call a function directly. It has less mental overhead and less setup.
Common mistakes to avoid:
- Forgetting to return an object in the create function. Use parentheses around your object.
- Using semicolons inside your state object. Use commas instead.
- Parsing data that is already a string.
State management libraries are not about managing state. They are about managing complexity.
Stop trying to memorize every API. Start looking at the problem the tool tries to solve. When you understand the problem, the tool makes sense.
Source: https://dev.to/chinwuba_jeffrey/understanding-zustand-2g11