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).

tsx
1const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
2
3export function useTheme() {
4  const ctx = useContext(ThemeContext);
5  if (!ctx) throw new Error('useTheme must be inside ThemeProvider');
6  return ctx;
7}

Zustand (Recommended for Most Apps)

tsx
1import { create } from 'zustand';
2
3const useStore = create((set) => ({
4  count: 0,
5  increment: () => set((state) => ({ count: state.count + 1 })),
6}));
7
8// Usage
9const 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.

Reference & Examples

See references/REFERENCE.md.

Related Topics

react/state-management | react/hooks