Zustand In React Native
Introduction
What is Zustand?
Zustand is a powerful and lightweight state-management library for React and React Native—it’s designed to be fast, minimal, and easy to use. It uses a central store with hooks-based API, eliminating boilerplate while supporting middleware, persistence, and more.
Key Benefits
- Minimal boilerplate — no actions, reducers, or providers needed.
- High performance — components subscribe to specific selectors, re-rendering only on relevant state changes.
- Flexible API — supports middleware (persist, devtools, actions, etc.)
- Scalable — works well for both small and large applications
- Modular: Split stores into logical units
Zustand vs Redux Vs Context
Zustand vs Other tools
Installation
Installation
If you need middleware
Usage
Basic Counter Example
/store/counterStore.js
/App.js
Example with persist storage
What is persist in Zustand?
By default, Zustand stores only live in memory. This means if we reload the app, the state resets to its initial value.
The persist middleware allows us to save Zustand state into a storage (AsyncStorage in React Native), so that the state persists even after app reloads.
How it Works?
You wrap your store inside persist.
- It intercepts state changes.
- Saves them to storage with a key (name).
- On app restart, it restores the saved state automatically.
Install AsyncStorage
/store/persistCounterStore.js
/PersistApp.js
Zustand’s persist middleware with MMKV (react-native-mmkv)
Install MMKV
Create MMKV instance
Use with Zustand persist
Use with Zustand persist
Use in Component
That storage: { … } block is what we call a custom storage adapter.
By default, zustand/persist only knows how to work with web’s localStorage.
But in React Native, we don’t have localStorage, so we have to tell it how to store and retrieve data.
That’s why we provide 3 functions inside storage:
- getItem(name)
Runs when Zustand loads the state.
It receives the key name (e.g. “counter-storage”)
Should return the stored JSON-parsed value or null if not found. - setItem(name, value)
Runs whenever Zustand saves the state.
It receives the key name and the stringified JSON value.
We just need to persist it. - removeItem(name)
Runs when you clear/reset the persisted store.
So basically, this block teaches Zustand how to use MMKV (or any other storage) instead of AsyncStorage.
In short:
storage: { getItem, setItem, removeItem } is just a bridge between Zustand’s persist middleware and whatever storage engine we want to use.
Example with Middleware
store/middlewareCounterStore.js
/MiddlewareCounterApp.js
logger middleware → logs every state change to the console.
devtools middleware → integrates with Redux DevTools (you can inspect state changes if you connect DevTools).
Example With Api Call
Example with Api Call
Conclusion
Zustand is an excellent choice for state management in React Native applications, especially for smaller to medium-sized projects where Redux might be overkill.
It offers all the features like persist, usage with sqlite or any other storage.
