react-native-state-management

---
name: react-native-state-management
description: Implement local and global state with Context, Zustand, and Redux Toolkit in React Native. Use when choosing or implementing state management in React Native with Context, Zustand, or Redux.
metadata:
  triggers:
    files:
    - '**/*.tsx'
    - '**/*.ts'
    keywords:
    - useState
    - useContext
    - zustand
    - redux
    - 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).

```tsx
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)

```tsx
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](references/REFERENCE.md) for Context patterns, Zustand store setup, Redux Toolkit, and React Query.