# React Native State Management

> Local and global state patterns with Context, Zustand, and Redux Toolkit.

- Skill: `fierzone/react-native-state-management` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add fierzone/react-native-state-management`
- Raw SKILL.md: https://api.skillmd.com/api/skills/fierzone/react-native-state-management/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: fierzone (https://skillmd.com/u/fierzone)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/fierzone/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).

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

## Reference & Examples

See [references/REFERENCE.md](references/REFERENCE.md).

## Related Topics

react/state-management | react/hooks