react-dev

Compute derived values directly during render instead of storing them in useState with a useEffect. If the calculation is expensive, wrap it in useMemo. This eliminates the extra render pass with stale intermediate state.

In React 19, ref is a regular prop, so accept it in the props object typed as React.Ref<HTMLElement> and pass it to the underlying element. forwardRef still works but is deprecated and no longer necessary.

useActionState replaces useFormState in React 19 for managing form submission state with Server Actions. It returns the current state, a form action, and an isPending flag, and works outside of form contexts as well.

Use Server Components for async data fetching and static rendering without hooks or browser APIs. Add the "use client" directive only to components needing state, effects, or event handlers, and push that boundary to leaf components.

Fetching in useEffect without cleanup causes race conditions where a slow earlier response overwrites a newer one. Add a cleanup function with an ignore flag, or use a framework data-fetching solution like React Query or SWR.

Avoid useEffect for derived state, responding to user events, resetting state on prop changes, and notifying parents. Use render-time computation, event handlers, the key prop, and direct callback invocation instead.