Performance and Memoization

Isolate the high-frequency state in its own leaf component that owns the mousemove listener and renders only the tooltip. If that component must visually wrap the dashboard, have it take the chart and table as children so those elements keep their identity across its updates.

A re-render costs what it does: the size of the subtree it triggers, heavy computation in the render bodies, DOM changes the diff commits, and how often it repeats. Cheap renders at click rate are free; wide subtrees at keystroke rate are not.

Native find-in-page, assistive-technology counts, printing and select-all all read the DOM, and windowing puts only a slice of rows there. Native find cannot be restored; you replace it with in-app search that scrolls to a match, declare true counts with ARIA, and manage focus across unmounts.

The virtualizer starts from an estimated height per row, renders the window, then measures each mounted row and caches its real height, rebuilding the offset table and total size. Until a row is measured its position is a guess, so correcting rows above the viewport shifts content unless the scroll is compensated.

Adopt in stages: run the compiler's health check to size the work, make its ESLint rule blocking and burn down the violations, compile a low-risk slice first via annotation mode, verify with tests and before-and-after profiling, then widen. Opt-outs get owners and expiry.

Restructure first, because moving state down or relaying subtrees as content deletes the render work outright with no precondition to maintain. Reserve memo boundaries for the few places where the update genuinely must originate high and feed an expensive subtree unchanged props.

"use no memo" is a directive placed as the first statement of a function body that tells the React Compiler to skip that one component or hook, leaving it uncompiled. It is a temporary debugging escape hatch, not a permanent fix.

Treat the Profiler as a comparative instrument, not an absolute one. Act on shape — commits per interaction, how much of the tree renders, how many components appear — and on before/after deltas from identical recordings, rather than on raw millisecond figures from a dev build on fast hardware.

Reject it as a blanket rule. Memoizing everything adds comparisons, retained caches and dependency arrays across the whole codebase, and most of those wrappers never skip anything. Target memoization at boundaries where profiling shows a real cost.

Settle what decision the data will drive, then place a handful of Profilers at meaningful boundaries, buffer and aggregate in the callback instead of sending per commit, sample traffic rather than instrumenting everyone, and agree in advance when the instrumentation gets removed.

Decide from measured production data: the p95 row count, the DOM and render cost of a single row, and whether scrolling actually drops frames. Windowing earns its permanent complexity and accessibility cost only for lists that are genuinely large and cannot be shortened.