- \n
- Minimal boilerplate<\/strong> \u2014 no actions, reducers, or providers needed.<\/li>\n
- High performance<\/strong> \u2014 components subscribe to specific selectors, re-rendering only on relevant state changes.<\/li>\n
- Flexible API<\/strong> \u2014 supports middleware (persist, devtools, actions, etc.)<\/li>\n
- Scalable<\/strong> \u2014 works well for both small and large applications<\/li>\n
- Modular<\/strong>: Split stores into logical units<\/li>\n<\/ul>\n
Zustand vs Redux Vs Context<\/h3>\n
![\"Comparison\"](\"https:\/\/tothenewco.pro\/blog\/wp-ttn-blog\/uploads\/2025\/07\/Screenshot-2025-07-29-at-10.34.34\u202fPM-300x82.png\")
Zustand vs Other tools<\/p><\/div>\n
Installation<\/h2>\n
![\"Installation\"](\"https:\/\/tothenewco.pro\/blog\/wp-ttn-blog\/uploads\/2025\/08\/Installation-1-300x91.png\")
Installation<\/p><\/div>\n
![\"If](\"https:\/\/tothenewco.pro\/blog\/wp-ttn-blog\/uploads\/2025\/08\/middleware-installation-300x58.png\")
If you need middleware<\/p><\/div>\n
Usage<\/h2>\n
Basic Counter Example<\/h3>\n
![\"\/store\/counterStore.js\"](\"https:\/\/tothenewco.pro\/blog\/wp-ttn-blog\/uploads\/2025\/08\/counterstore-300x121.png\")
\/store\/counterStore.js<\/p><\/div>\n
![\"](\"https:\/\/tothenewco.pro\/blog\/wp-ttn-blog\/uploads\/2025\/08\/app-300x172.png\")
\/App.js<\/p><\/div>\n
Example with persist storage<\/h3>\n
What is persist in Zustand?<\/h3>\n
By default, Zustand stores only live in memory. This means if we reload the app, the state resets to its initial value.<\/p>\n
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.<\/p>\n
How it Works?<\/strong><\/p>\n
You wrap your store inside persist.<\/p>\n
- \n
- It intercepts state changes.<\/li>\n
- Saves them to storage with a key (name).<\/li>\n
- On app restart, it restores the saved state automatically.<\/li>\n<\/ul>\n
![\"Install](\"https:\/\/tothenewco.pro\/blog\/wp-ttn-blog\/uploads\/2025\/08\/async-installation-300x53.png\")
Install AsyncStorage<\/p><\/div>\n
![\"\/store\/persistCounterStore.js\"](\"https:\/\/tothenewco.pro\/blog\/wp-ttn-blog\/uploads\/2025\/08\/persist-store-1-300x204.png\")
\/store\/persistCounterStore.js<\/p><\/div>\n
![\"\/PersistApp.js\"](\"https:\/\/tothenewco.pro\/blog\/wp-ttn-blog\/uploads\/2025\/08\/persist-app-300x163.png\")
\/PersistApp.js<\/p><\/div>\n
Zustand’s persist middleware with MMKV (react-native-mmkv)<\/h3>\n
![\"Install](\"https:\/\/tothenewco.pro\/blog\/wp-ttn-blog\/uploads\/2025\/08\/mmkp-installation-300x135.png\")
Install MMKV<\/p><\/div>\n
![\"Create](\"https:\/\/tothenewco.pro\/blog\/wp-ttn-blog\/uploads\/2025\/08\/mmkv-store-300x119.png\")
Create MMKV instance<\/p><\/div>\n
![\"Use](\"https:\/\/tothenewco.pro\/blog\/wp-ttn-blog\/uploads\/2025\/08\/mmkv-persist-269x300.png\")
Use with Zustand persist<\/p><\/div>\n
Use with Zustand persist<\/p><\/div>\n
![\"Use](\"https:\/\/tothenewco.pro\/blog\/wp-ttn-blog\/uploads\/2025\/08\/mmkv-app-300x171.png\")
Use in Component<\/p><\/div>\n
That storage: { … } block is what we call a custom storage adapter.<\/p>\n
By default, zustand\/persist only knows how to work with web\u2019s localStorage.
\nBut in React Native, we don\u2019t have localStorage, so we have to tell it how to store and retrieve data.<\/p>\nThat\u2019s why we provide 3 functions inside storage:<\/p>\n
- \n
- getItem(name)<\/strong>
\nRuns when Zustand loads the state.
\nIt receives the key name (e.g. “counter-storage”)
\nShould return the stored JSON-parsed value or null if not found.<\/li>\n- setItem(name, value)<\/strong>
\nRuns whenever Zustand saves the state.
\nIt receives the key name and the stringified JSON value.
\nWe just need to persist it.<\/li>\n- removeItem(name)<\/strong>
\nRuns when you clear\/reset the persisted store.<\/li>\n<\/ol>\nSo basically, this block teaches Zustand how to use MMKV (or any other storage) instead of AsyncStorage.<\/p>\n
In short:
\nstorage: { getItem, setItem, removeItem } is just a bridge between Zustand\u2019s persist middleware and whatever storage engine we want to use.<\/p>\nExample with Middleware<\/h3>\n
![\"store\/middlewareCounterStore.js\"](\"https:\/\/tothenewco.pro\/blog\/wp-ttn-blog\/uploads\/2025\/08\/middleware-store-300x167.png\")
store\/middlewareCounterStore.js<\/p><\/div>\n
![\"\/MiddlewareCounterApp.js\"](\"https:\/\/tothenewco.pro\/blog\/wp-ttn-blog\/uploads\/2025\/08\/middleware-app-300x172.png\")
\/MiddlewareCounterApp.js<\/p><\/div>\n
logger middleware \u2192 logs every state change to the console.
\ndevtools middleware \u2192 integrates with Redux DevTools (you can inspect state changes if you connect DevTools).<\/p>\nExample With Api Call<\/h2>\n
![\"Example](\"https:\/\/tothenewco.pro\/blog\/wp-ttn-blog\/uploads\/2025\/08\/api-call-example-248x300.png\")
Example with Api Call<\/p><\/div>\n
Conclusion<\/h2>\n
Zustand is an excellent choice for state management in React Native applications, especially for smaller to medium-sized projects where Redux might be overkill.<\/p>\n
It offers all the features like persist, usage with sqlite or any other storage.<\/p>\n","protected":false},"excerpt":{"rendered":"
Introduction What is Zustand? Zustand is a powerful and lightweight state-management library for React and React Native\u2014it\u2019s designed to be fast, minimal, and easy to use. It uses a\u00a0central store\u00a0with\u00a0hooks-based API, eliminating boilerplate while supporting middleware, persistence, and more. Key Benefits Minimal boilerplate \u2014 no actions, reducers, or providers needed. High performance \u2014 components subscribe […]<\/p>\n","protected":false},"author":2117,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":85,"footnotes":""},"categories":[5881],"tags":[55,5853,7706],"class_list":["post-73715","post","type-post","status-publish","format-standard","hentry","category-react-native","tag-javascript","tag-reactnative","tag-zustand"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t
- setItem(name, value)<\/strong>
- getItem(name)<\/strong>
- High performance<\/strong> \u2014 components subscribe to specific selectors, re-rendering only on relevant state changes.<\/li>\n