React Native State Management Skill

Agent Skills: React Native State Management

Manage 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. (triggers: **/*.tsx, **/*.ts, useState, useContext, zustand, redux, state-management)

UncategorizedID: hoangnguyen0403/agent-skills-standard/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.