Zustand Patterns for React Native

Problem Statement

Zustand's simplicity hides important timing details. set() is synchronous, but React re-renders are batched. getState() escapes stale closures. Async actions in stores need careful handling. Understanding these internals prevents subtle bugs.

---

Pattern: set() is Synchronous, Renders are Batched

Problem: Assuming state is "ready" for React immediately after set().

const useStore = create((set, get) => ({
  count: 0,

  increment: () => {
    set({ count: get().count + 1 });
    // State IS updated here (set is sync)
    console.log(get().count); // ✅ Shows new value

    // But React hasn't re-rendered yet
    // Component will see old value until next render cycle
  },
}));

Key insight:

• set() updates the store synchronously
• getState() immediately reflects the new value
• React components re-render asynchronously (batched)

When this matters:

• Chaining multiple state updates
• Validating state after update
• Debugging "stale" component values

---

Pattern: getState() Escapes Stale Closures

Problem: Callbacks and async functions capture state at creation time. Using get() or getState() always gets current state.

const useStore = create((set, get) => ({
  answers: {},

  // WRONG - state captured at function creation
  saveAnswerBad: (questionId: string, value: number) => {
    setTimeout(() => {
      const answers = get().answers; // ❌ This is fine
      // But if someone passed `answers` as a parameter...
    }, 1000);
  },

  // CORRECT - always use get() for current state
  saveAnswer: async (questionId: string, value: number) => {
    await someAsyncOperation();
    // After await, use get() to ensure current state
    const currentAnswers = get().answers;
    set({ answers: { ...currentAnswers, [questionId]: value } });
  },
}));

// In components - same principle
function Component() {
  const answers = useStore((s) => s.answers);

  const handleSave = async () => {
    await delay(1000);
    // answers here is stale! Captured at render time

    // Use getState() for current value
    const current = useStore.getState().answers;
  };
}

Rule: After any await, use get() or getState() - never rely on closure-captured values.

---

Pattern: Async Actions in Stores

Problem: Async actions need explicit async/await and careful state reads after awaits.

const useStore = create((set, get) => ({
  loading: false,
  data: null,
  error: null,

  // WRONG - no async keyword, race condition prone
  fetchDataBad: (id: string) => {
    set({ loading: true });
    api.fetch(id).then((data) => {
      set({ data, loading: false });
    });
    // Returns immediately, caller can't await
  },

  // CORRECT - proper async action
  fetchData: async (id: string) => {
    set({ loading: true, error: null });

    try {
      const data = await api.fetch(id);
      // Re-read state after await if needed
      if (get().loading) { // Check we're still in loading state
        set({ data, loading: false });
      }
    } catch (error) {
      set({ error: error.message, loading: false });
    }
  },
}));

// Caller can properly await
await useStore.getState().fetchData('123');

---

Pattern: Selector Stability

Problem: Selectors that create new objects cause unnecessary re-renders.

// WRONG - creates new object every render
const data = useStore((state) => ({
  name: state.name,
  count: state.count,
}));

// CORRECT - use multiple selectors
const name = useStore((state) => state.name);
const count = useStore((state) => state.count);

// OR - use shallow comparison (Zustand 4.x)
import { shallow } from 'zustand/shallow';

const { name, count } = useStore(
  (state) => ({ name: state.name, count: state.count }),
  shallow
);

// Zustand 5.x - use useShallow hook
import { useShallow } from 'zustand/react/shallow';

const { name, count } = useStore(
  useShallow((state) => ({ name: state.name, count: state.count }))
);

---

Pattern: Derived State

Problem: Computing derived values in selectors vs storing them.

const useStore = create((set, get) => ({
  answers: {},

  // WRONG - storing derived state that can become stale
  totalAnswers: 0,
  updateTotalAnswers: () => {
    set({ totalAnswers: Object.keys(get().answers).length });
  },

  // CORRECT - compute in selector (always fresh)
  // answers: {},  // Just store the source data
}));

// Selector computes derived value
const totalAnswers = useStore((state) => Object.keys(state.answers).length);

// For expensive computations, memoize outside the store
import { useMemo } from 'react';

function Component() {
  const answers = useStore((state) => state.answers);
  const expensiveResult = useMemo(() => {
    return computeExpensiveAnalysis(answers);
  }, [answers]);
}

---

Pattern: Store Subscriptions for Side Effects

Problem: Need to react to state changes outside React components.

// Subscribe to specific state changes
const unsubscribe = useStore.subscribe(
  (state) => state.answers,
  (answers, prevAnswers) => {
    console.log('Answers changed:', { prev: prevAnswers, current: answers });
    // Persist to storage, send analytics, etc.
  },
  { equalityFn: shallow }
);

// In Zustand 4.x with subscribeWithSelector middleware
import { subscribeWithSelector } from 'zustand/middleware';

const useStore = create(
  subscribeWithSelector((set, get) => ({
    answers: {},
    // ...
  }))
);

---

Pattern: Testing Zustand Stores

Problem: Tests need to reset store state and verify async flows.

// Store with reset capability
const initialState = {
  answers: {},
  loading: false,
};

const useStore = create((set, get) => ({
  ...initialState,

  // Actions...

  // Reset for testing
  _reset: () => set(initialState),
}));

// Test
describe('Assessment Store', () => {
  beforeEach(() => {
    useStore.getState()._reset();
  });

  it('saves answers during retake flow', async () => {
    const store = useStore.getState();

    // Full async flow
    await store.loadCompletedAnswers(assessmentId);
    await store.enableSkillAreaRetake('fundamentals');

    // Verify state after async
    expect(store.getState().retakeAreas).toContain('fundamentals');

    // Continue flow
    await store.saveAnswer('q1', 4);

    // Verify final state
    expect(useStore.getState().userAnswers['q1']).toBe(4);
  });
});

---

Pattern: Debugging State Changes

Problem: Tracking down when/where state changed unexpectedly.

// Add logging middleware
import { devtools } from 'zustand/middleware';

const useStore = create(
  devtools(
    (set, get) => ({
      // ... your store
    }),
    { name: 'AssessmentStore' }
  )
);

// Manual logging for specific debugging
const useStore = create((set, get) => ({
  answers: {},

  saveAnswer: (questionId: string, value: number) => {
    console.log('[saveAnswer] Before:', {
      questionId,
      value,
      currentAnswers: get().answers,
      retakeAreas: get().retakeAreas,
    });

    set((state) => ({
      answers: { ...state.answers, [questionId]: value },
    }));

    console.log('[saveAnswer] After:', {
      answers: get().answers,
    });
  },
}));

---

Common Pitfalls

Pitfall	Solution
Stale closure after await	Use get() after every await
Selector returns new object	Use shallow or multiple selectors
Action not awaitable	Add async keyword, return promise
State seems stale in component	Component hasn't re-rendered yet - use getState() for immediate reads
Can't find when state changed	Add devtools middleware or manual logging

---

Zustand 5.x Migration Notes

If upgrading from 4.x:

// 4.x - shallow from main package
import { shallow } from 'zustand/shallow';

// 5.x - useShallow hook for React
import { useShallow } from 'zustand/react/shallow';

// 4.x - type parameter often needed
const useStore = create<StoreType>()((set, get) => ({...}));

// 5.x - improved type inference
const useStore = create((set, get) => ({...}));