State Management

Local State and Context

useState handles component-local UI state: modals, inputs, toggles. Lift state up when sibling components must share values.

Context provides dependency injection for theme, auth, and locale without prop drilling. Split contexts to avoid rerendering unrelated consumers.

useReducer models complex state transitions with explicit actions similar to Redux reducers locally.

• Memoize context values with useMemo to limit rerenders
• Do not store large lists in context without selectors
• Combine with useCallback for stable action functions

const AuthContext = createContext<AuthState | null>(null);

export function AuthProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<User | null>(null);
  return (
    <AuthContext.Provider value={{ user, setUser }}>
      {children}
    </AuthContext.Provider>
  );
}

Redux and Zustand

Redux Toolkit centralizes global state with slices, immer-powered reducers, and RTK Query for data fetching. DevTools aid debugging.

Zustand offers minimal API with hooks accessing store slices directly—popular for medium complexity without boilerplate.

Persist auth tokens and preferences with redux-persist or zustand/middleware/persist paired with AsyncStorage.

• Colocate server cache in RTK Query or TanStack Query
• Normalize entities for list/detail screens
• Hydrate persisted state before rendering protected routes