react

Most unnecessary effects derive state from props or run logic belonging to a user action. Compute derived values directly in render, move user-action logic into event handlers, and reserve useEffect for synchronizing with external systems like subscriptions, timers, or DOM APIs.

Stale closures happen when an effect or callback references a reactive value missing from its dependency array. Add every reactive value to the deps array or restructure with a functional setState updater; suppressing react-hooks/exhaustive-deps hides the bug rather than fixing it.

Use them only when a profiler shows a real bottleneck, a memoized child receives inline objects or functions, or a value needs referential stability as a hook dependency. Default to no memoization since each call adds comparison cost and dependency maintenance.

Index keys break when a list sorts, filters, reorders, or inserts items, because React matches elements by key across renders and reuses the wrong component state. Use a stable id from the data; index keys are acceptable only for append-only lists.

Lift state to the lowest common owner when two siblings need to share it. Use Context only for values needed at many depths like theme or current user; two or three levels of prop drilling is not a Context use case, and every consumer re-renders when the value changes.