React Native State Management

在 Context、Zustand 以及 Redux Toolkit 中探索本地与全局状态的模式。

SKILL.md

--- frontmatter

name: React Native State Management
description: Local and global state patterns with Context, Zustand, and Redux Toolkit.
metadata:
  labels: [react-native, state, redux, zustand, context]
  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.

Reference & Examples

See references/REFERENCE.md.

Related Topics

react/state-management | react/hooks