Training Grounds
Memo Doesn't HoldBlue Belt
+25 Ki
Description

A settings panel has a search input and a separate theme display that should stay unchanged when only the search query updates.

Anomaly

Type anything in the search box - the render counter climbs on every keystroke even though the theme never changed.

Constraint
Do not remove React.memo from the child component
Do not move the search input out of the parent
Hint

Think about what React.memo actually compares when it decides whether to skip a re-render.

Consult the SenseiOnly for those truly stuck · Flip to reveal

Think about what React.memo actually compares when it decides whether to skip a re-render.

Practice 8 related drills →
Loading editor…
Correct Solution
Loading...

Why this fixes it

`const config = { theme: "dark" }` runs inside the component body on every render, creating a brand-new object at a new memory address each time. React.memo compares props by reference - `{} !== {}` even when contents are identical - so the new reference caused the memo check to fail on every parent render. Wrapping the object in `useMemo(() => ({ theme: "dark" }), [])` produces the same reference across renders. React.memo now sees the same object and the child skips re-rendering.

Expected OutputGoal State
Your OutputLive