React Native State Management

React Native State Management

Priority: P1 (OPERATIONAL)

State Strategy

• Local State: Use useState for component-scoped state (forms, UI toggles).
• Lifted State: Share between siblings via parent component.
• Context: Share across components without prop drilling (theme, auth).
• Zustand: Lightweight global state for small-medium apps.
• Redux Toolkit: Complex apps with time-travel debugging needs.
• Server State: Use @tanstack/react-query for API data (caching, refetching).

const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

export function useTheme() {
  const ctx = useContext(ThemeContext);
  if (!ctx) throw new Error('useTheme must be inside ThemeProvider');
  return ctx;
}

Zustand (Recommended for Most Apps)

import { create } from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

// Usage
const count = useStore((state) => state.count);

Anti-Patterns

• No Redux for Everything: Start with Context/Zustand.
• No Prop Drilling: Use Context for global state.
• No Derived State in State: Compute in render.

References

See references/REFERENCE.md for Context patterns, Zustand store setup, Redux Toolkit, and React Query.