react

Use React.lazy with a dynamic import, then wrap the component in a Suspense boundary with a fallback UI. For example, const Chart = React.lazy(() => import('./Chart')) rendered inside <Suspense fallback={<Loading />}>. Route-level splitting works the same way for page components.

Wrap expensive pure components in React.memo, stabilize event handlers with useCallback, and memoize expensive computations with useMemo. Avoid creating inline objects or arrays in JSX since new references trigger child re-renders.

No, React 19 removed the need for forwardRef. You pass ref directly as a regular prop to function components and type it as React.Ref<HTMLElement>. The old forwardRef API still works but is no longer required.

Stale data usually means missing dependencies in the dependency array. Every value used inside useEffect that can change, such as userId, must be listed in the deps array so the effect re-runs when it changes.

Use useTransition when you control the state update and want to mark it as non-urgent, such as tab switches. Use useDeferredValue when you receive a value from a parent, like a search query, and want to defer expensive re-renders derived from it.