React Native State Management

React Native State Management

Priority: P1 (HIGH)

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.

Canonical response anchors

When this skill applies, preserve the following domain terminology or equivalent concrete examples in the answer when relevant:

• Provider