zustand-mmkv-storage: Blazing Fast Persistence for Zustand in React Native

Mehdi Faraji — Mon, 29 Dec 2025 23:06:04 +0000

Persisting State in React Native: Why MMKV + Zustand is the Winning Combo 🚀

If you're building React Native apps, you've probably faced the classic problem: how do I save user data (theme, auth token, cart, preferences) so it survives app restarts?

React Native gives us a few options for local storage, but not all are created equal. Let's walk through the landscape, why persistence matters, the limitations of the old standard, and why MMKV has become the go-to choice — especially when paired with Zustand.

Why Do We Need Persistent State in React Native?

Mobile users expect apps to "remember" them:

Login tokens should stay valid
Shopping carts shouldn't empty on app close
Theme preferences (dark/light) should persist
Onboarding flow shouldn't replay every time

Without persistence, your app feels broken. With good persistence, it feels native and polished.

The Old King: AsyncStorage

For years, AsyncStorage was the default solution. It's simple, works everywhere, and integrates nicely with libraries like Zustand/Redux.

But it has serious downsides:

Slow: Fully JavaScript-based, serialized bridge calls
Async-only: Every read/write blocks UI if not careful
No encryption out of the box
Deprecated by React Native core team (replaced by community forks)

Benchmarks show MMKV can be 30–100x faster than AsyncStorage in real-world scenarios.

Enter MMKV: The Modern Champion

MMKV (Mobile Key-Value) is a high-performance key-value store developed by Tencent and now maintained by Marc Rousavy (@mrousavy).

Key advantages:

Written in C++ with JSI bindings → blazing fast
Synchronous reads/writes (no await needed for get)
Built-in encryption support
Multi-process mode (safe for app groups/extensions)
Tiny footprint, Expo-compatible
Actively maintained and used in production by big apps

In short: MMKV is what AsyncStorage should have been in 2025.

Zustand + Persistence = Magic

Zustand is the most popular lightweight state manager in React Native today. Its persist middleware makes saving state trivial — if you have a good storage backend.

That's where most people hit friction: wiring MMKV manually is verbose, error-prone, and doesn't handle instance sharing or encryption cleanly.

Introducing zustand-mmkv-storage

I built zustand-mmkv-storage to solve exactly this.

It's a tiny (<1KB), zero-dependency adapter that lets you use MMKV as the storage backend for Zustand's persist — with all the modern features you'd expect:

Lazy dynamic import → no startup cost
Global instance caching → same config = same MMKV instance (efficient & consistent)
Full encryption support
Multiple isolated stores (perfect for separating auth, settings, user data)
Hydration-ready (no flash of empty state)
Works with Expo & bare React Native

Installation

npm install zustand-mmkv-storage zustand react-native-mmkv
# or
yarn add zustand-mmkv-storage zustand react-native-mmkv
# or
pnpm add zustand-mmkv-storage zustand react-native-mmkv

Simple Usage

import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';
import { mmkvStorage } from 'zustand-mmkv-storage';

export const useBearStore = create(
  persist(
    (set) => ({
      bears: 0,
      addBear: () => set((state) => ({ bears: state.bears + 1 })),
    }),
    {
      name: 'bear-storage', // key in MMKV
      storage: createJSONStorage(() => mmkvStorage),
    }
  )
);

That's it. Your bears count now persists across app restarts — fast and reliably.

Advanced: Encrypted & Isolated Storage

import { createMMKVStorage } from 'zustand-mmkv-storage';

const secureStorage = createMMKVStorage({
  id: 'secure-vault',           // separate file
  encryptionKey: 'my-secret-2025', // enables encryption
});

export const useAuthStore = create(
  persist(
    (set) => ({
      token: '',
      setToken: (token) => set({ token }),
    }),
    {
      name: 'auth-storage',
      storage: createJSONStorage(() => secureStorage),
    }
  )
);

Now your auth token is encrypted on disk and completely isolated from other data.

Use Cases

Auth tokens & refresh tokens
User preferences (theme, language)
Shopping carts / offline forms
Onboarding completion
Feature flags / A-B testing

Try It Today!

npm i zustand-mmkv-storage

GitHub - NPM

If this saves you time or makes your app faster, I'd love a ⭐ on GitHub!
Thanks for reading — happy (and fast) persisting! 🐻✨

reactnative #zustand #mmkv #javascript #opensource

Merge and bundle open api yaml files for swagger

Mehdi Faraji — Sat, 31 Aug 2024 22:41:07 +0000

Have you ever tried to document your apis with swagger?

The way you would approach after watching some tutorials and reading OPENAPI official documentation, is to code in a single yaml file and define components, schemas and etc all in one place.

In the end you will end up with hundreds of lines of code in a single file which is hard to read, not easy to modify or debug after a while.

And the only way to have a better development experience, is to use openapi's own SwaggerHub which is not free to use after all.

Not so good, right?

The better way to approach this situation is to have nicely named yaml files and folders and export them to use in a single yaml file.

Basically we will treat each schema or resource as a module and export it and then import each of them in a main file.

Then we would bundle and merge all files and build a single yaml file for our api documentation.

The structure I suggest is to create separate folders for parameters, resources, responses and schemas.

Finally you can bundle all of your yaml files with this command:

npx swagger-cli bundle src/openapi.yaml - outfile _build/openapi.yaml - type yaml

The swagger-cli tool merges all of your yaml files into one file inside _build directory.

To test it out, you can copy the generated build file and paste it in Swagger live editor.

You can check how I've demonstrated the bundling on my Github repo.

DEV Community: Mehdi Faraji