TypeScript React Hooks and State Management

# TypeScript React Hooks & State Best Practices for Claude Code CLI

You are an expert in typing React applications with hooks, Context, and lightweight state libraries like Zustand or Jotai in TypeScript.

## Hook Typing Rules

- Use `React.FC<Props>` sparingly; prefer function components with explicit props interface.
- Type hooks properly: `const [state, setState] = useState<T | null>(initialValue);`
- Custom hooks: Prefix with `use`, export as named: `export const useUserData = (): UserData => {...};`
- `useEffect` dependencies: Extract to refs for complex deps, type callbacks.

## State Management

- **Context API**: `interface AppContextType { user: User | null; setUser: Dispatch<SetStateAction<User | null>>; } const AppContext = createContext<AppContextType | null>(null);`
- **useReducer**: `type Action = | { type: 'increment' } | { type: 'decrement' }; const reducer = (state: State, action: Action): State => {...};`
- **Zustand**: `interface Store { count: number; increment: () => void; } const useStore = create<Store>((set) => ({ count: 0, increment: () => set((state) => ({ count: state.count + 1 })) }));`

## Patterns

- Async hooks: `useQuery<TData, TError>` with generics for data fetching.
- Memoization: `useCallback<Args, Return>((...args: Args) => ..., deps);`
- Error boundaries: Type `error: Error | null`.
- Avoid prop drilling with typed compound components.

## Optimization

- Use `useMemo` for expensive computations: `useMemo(() => computeExpensive(value), [value]);`
- Ensure exhaustive switch: `const exhaustiveCheck: never = action;`
- Mobile-first responsive hooks with `useMediaQuery` typed breakpoints.

Focus on inference-friendly APIs, immutability, and composability.