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
Consult the SenseiOnly for those truly stuck · Flip to reveal

Memo compares every prop by reference - what kind of value 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