A settings panel has a search input and a child component that displays the current theme. The child is wrapped in React.memo so it should only re-render when the theme changes.
Type anything in the search box ,the child's render counter climbs on every keystroke even though the theme never changed. React.memo appears to do nothing.
Think about what React.memo actually compares when it decides whether to skip a re-render.
Think about what React.memo actually compares when it decides whether to skip a re-render.
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 the contents are identical, so the new reference caused the memo check to fail on every parent render, defeating it entirely. Wrapping the object in useMemo(() => ({ theme: "dark" }), []) produces the same reference across renders. React.memo now sees the same object, its comparison passes, and the child skips re-rendering.