Spent the afternoon profiling a React app with too many unnecessary re-renders. The culprit was a context provider wrapping the entire tree that updated on every keystroke.
The fix was straightforward — split the context into a read context and a dispatch context. Components that only consume state no longer re-render when actions are dispatched. Dropped re-render count from ~80 to ~12 per interaction.
Worth revisiting useMemo and useCallback placement as well. They are often added too eagerly before profiling, and sometimes removed too eagerly after.