react-best-practices

Prevent re-renders by colocating state near its consumers, using children composition to isolate stateful wrappers from heavy subtrees, and avoiding new object or function references passed to memoized children. Profile with React DevTools to confirm the fix.

Use useMemo only for expensive calculations like sorting large lists, and useCallback for functions passed to memoized children or hook dependency arrays. Wrapping cheap computations or every handler adds overhead without benefit.

Use Server Components by default for data fetching and static content since they add zero bundle overhead and keep secrets on the server. Add 'use client' only at leaf nodes that need interactivity like onClick handlers, inputs, or browser APIs.

Using array index as key breaks React's reconciliation when lists are reordered, filtered, or sorted, causing incorrect state association and rendering bugs. Always use stable unique identifiers like item.id for dynamic lists.

Avoid useEffect for derived state, which should be computed during render or with useMemo, and for user event logic, which belongs directly in event handlers like onClick or onSubmit. Reserve useEffect for genuine external system synchronization.