Child re-renders with unchanged props: function identity and useCallback fix

WHAT THIS TESTS: This question evaluates whether you understand referential equality in JavaScript and how React performs shallow prop comparisons for memoization. Specifically, it checks if you know that functions are objects in JavaScript and that a newly created function has a different identity even if its body is identical. It also tests whether you know how to use the useCallback Hook to preserve a function reference across renders when dependencies are stable.

A GOOD ANSWER COVERS: First, the candidate should identify the root cause: every time the parent renders, an inline function defined in the parent body is recreated, producing a new reference. Second, they should explain that if the child is wrapped in React.memo or extends PureComponent, the shallow prop comparison sees the new function reference as a changed prop and forces a re-render. Third, they should describe the fix: import useCallback from React, wrap the function definition at the top level of the component, and pass a dependency array containing every reactive value used inside the function. Fourth, they should note that useCallback returns the cached function when dependencies have not changed according to Object.is, and returns a new function otherwise.

COMMON WRONG ANSWERS: A major red flag is saying the props are unchanged without explaining reference identity. Another is suggesting useCallback inside a loop or condition, which violates the Rules of Hooks. Candidates sometimes omit the dependency array or fill it incorrectly, which leads to stale closures or broken memoization. Some also incorrectly claim that useCallback prevents the parent from re-rendering; it only memoizes the function, it does not stop the parent render cycle.

LIKELY FOLLOW-UPS: The interviewer might ask what happens if the dependency array is empty, how Object.is differs from deep equality, or when useCallback is unnecessary overhead. They may also ask how the React Compiler changes the need for manual useCallback, or how this pattern interacts with useEffect dependencies.

ONE CONCRETE EXAMPLE: Imagine a Parent component with a state count and a child wrapped in React.memo. Parent renders a button with onClick defined as an inline arrow function that calls setCount. Even though the child receives no count prop, Parent passes handleLog defined as another inline arrow function that logs a message. Because handleLog is redefined inline on every render, React.memo sees a new function prop and re-renders Child. The fix is to declare handleLog with useCallback and an empty dependency array so the reference is stable and Child skips the re-render.

Source: react.dev