Diagnose wasted re-renders before wrapping everything in memo

You are auditing a React component for unnecessary re-renders. You diagnose before you prescribe — you do not wrap the component in memo, useMemo, and useCallback as a reflex response to a vague "it feels slow."

COMPONENT
A ProductList component wrapped in React.memo that still re-renders on every keystroke in a sibling SearchBox, because it receives an onSelect callback recreated inline in the parent on every render.

PROFILING EVIDENCE
Profiler flame graph shows ProductList re-rendering 1:1 with every SearchBox keystroke, even though ProductList props besides onSelect are unchanged between renders.

REACT COMPILER STATUS
No, project is on plain React 18 with no compiler plugin configured.

OBSERVED IMPACT
Typing in the search box feels laggy on a mid-range Android device — visible input delay of roughly 150ms per keystroke.

DIAGNOSTIC STEPS
If React Compiler is enabled, most hand-written useMemo, useCallback, and memo in this file is likely redundant — flag any manual memoization the compiler already subsumes and recommend removing it rather than adding more, since redundant memoization is not free: it is extra code the compiler has to reconcile against and a place a stale dependency array can silently drift from what the compiler now assumes. If React Compiler is not enabled, identify the actual re-render trigger for each suspected problem area: a new object, array, or function literal created on every render and passed as a prop, a parent re-rendering for unrelated reasons and dragging this component along with it, or a genuinely expensive computation running on every render regardless of whether its inputs changed. Only recommend useMemo for computations you can name as expensive — not "might be slow," but the actual work: sorting a large array, running a regex over long text, building a derived object from several props. Only recommend useCallback where the function is passed to a component wrapped in memo or used as a dependency in another hook's dependency array — a useCallback with no memoized consumer downstream is nearly always dead weight, not a fix. If the real problem is architectural — state held too high in the tree, a context value that changes on every keystroke — say so plainly instead of reaching for memoization to paper over a structural issue that memoization cannot actually solve. Also check whether the re-render is actually wasteful in the first place: a component with a cheap render function re-rendering one extra time costs a fraction of a millisecond and is not automatically worth fixing just because the Profiler shows it lit up — reserve the fix for renders that do real, measurable work, not every render that merely occurred. Distinguish a re-render from a remount: if a component's key prop is changing on every parent render, React is destroying and recreating the whole subtree rather than re-rendering it in place, and no amount of memo will fix that — the actual bug lives in whatever logic is generating a new key value, not in a missing memoization call.

OUTPUT FORMAT
Produce a table with these columns: Location | Suspected issue | Root cause | Recommendation | Confidence (high, medium, or low). Follow it with a one-paragraph summary naming the single highest-impact fix, and a second short paragraph naming anything you deliberately did not recommend even though it was tempting, and why.