Training Grounds
Memo Broken by Inline FunctionBlue Belt
+25 Ki
Description

A search panel has a memoized button that should only re-render when its label changes.

Anomaly

Type in the search box - the button's render counter climbs on every keystroke even though its label never changed.

Constraint
Do not remove React.memo from the child
Do not remove the onClick prop
Hint

React.memo compares every prop - what kind of prop is onClick?

Consult the SenseiOnly for those truly stuck · Flip to reveal

React.memo compares every prop - what kind of prop is onClick?

Loading editor…
Correct Solution
Loading...

Why this fixes it

handleAction was a plain function defined inside the component body, so every render created a new function reference. React.memo compares props by reference — the new onClick reference on every render caused the memo check to fail every time. Wrapping it in useCallback with [] produces the same reference across renders, so React.memo sees identical props and skips the re-render.

Expected OutputGoal State
Your OutputLive