React tips
6 tips · newest first
React 19 tips: the compiler, new hooks like useActionState and useOptimistic, and patterns that replace boilerplate — each as a minimal snippet.
The stale closure, your debounced callback saves old state
REACTStabilizing a debounce with useMemo(() => debounce(fn, 300), []) fixes one bug and creates a worse one: the callback is…
Let the React Compiler memoize instead of hand-writing useMemo/useCallback
REACTThe React Compiler analyzes your components and automatically memoizes values and callbacks at build time, following th…
Drop forwardRef in React 19 and accept ref as a normal prop
REACTReact 19 lets function components receive ref as a regular prop, so forwardRef is no longer required for the common cas…
Handle form mutations with built-in pending and error state via useActionState
REACTuseActionState wraps an async action and returns the last result, the action to bind to a <form action>, and a pending…
Read promises and context conditionally with the use() hook
REACTReact 19's use() unwraps a promise or reads context, and unlike the Rules of Hooks it can be called conditionally or in…
Show instant UI with useOptimistic and auto-revert on failure
REACTuseOptimistic renders an expected next state immediately while the real async action runs, then reconciles to the true…