What to write, what to delete, and the new React 19 APIs.

React 19 Hooks — Modern Mental Model

React 19 introduces the React Compiler that auto-memoizes components, eliminating most manual useMemo/useCallback calls. The new use() hook replaces useEffect data‑fetching anti‑patterns, useActionState handles form submissions, and useFormStatus propagates pending states down the component tree. Understanding the mental model lets you write less code that does more.

Interactive Pipeline Flow

SetupCoreOutput

🌱 Mount — component tree

Component mounts into the React fiber tree. React 19 reconciler schedules work based on Lane priorities.

Architecture Diagrams

New hooks in React 19: use(), useActionState, useFormStatus, useOptimistic.

Loading diagram...

Key Design Decisions

🚫Stop writing useMemo/useCallback

The React Compiler handles memoization automatically. Audit your codebase and remove manual memos after enabling the compiler.

⚡use() replaces fetch useEffect

Wrap async data in a promise and pass it to use(). It suspends while loading, no effect cleanup needed.

🎬useActionState for mutations

Replaces the [loading, error, data] state + try/catch pattern for form submissions with a clean server action integration.

Discussion