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.