# React 19+ best practices

## Function components only

- No `class` components, no `componentDidMount`, no `this`.
- Each component is a small async-safe function with explicit prop types.

## Hooks discipline

- Hooks at the **top level** of a component, never inside conditionals/loops.
- `useState` for local, `useReducer` for non-trivial state, `useContext` for cross-cutting reads.
- `useMemo` / `useCallback` only when profiling shows they help. React 19's compiler covers most cases.
- Custom hooks always start with `use`. Side effects go through `useEffect`, not render bodies.

## Async + Suspense

- Prefer `Suspense` boundaries and `use()` for async data instead of bespoke loading flags.
- Wrap state updates that don't need to be synchronous in `startTransition`.

## Refs

- `useRef` for DOM nodes and mutable boxes. Forward refs only when the parent legitimately needs the node.
- Never read `.current` during render.

## Anti-patterns

- ❌ Storing derived state in `useState` (compute it on render).
- ❌ Mutating props.
- ❌ Effects that just sync state to other state — derive it instead.
- ❌ Index as a list key when the list reorders.