React dev cuts keystroke lag from 142ms to near-zero by moving state down the tree

A React developer discovered their dashboard search box had nearly 300ms input lag, causing the entire app — including unrelated components like headers, sidebars, and charts — to re-render on every keystroke. React DevTools confirmed that a single keypress was triggering a 142.7ms render path across roughly 150 components, far exceeding the 16ms budget needed for smooth 60fps interactions. The root cause was storing the search query state in the top-level Dashboard component, giving it unnecessary reach over the whole page. Drawing a parallel to Python's scoping principle of keeping variables in the narrowest scope needed, the developer moved the search state into a dedicated SearchableDataGrid component shared only by the search input and data table. The fix required no memoization — just relocating state to the smallest component subtree that actually needed it.