**Landing a senior or even mid-level React role **requires more than knowing how to use useState. You need to understand why React works the way it does.
I just published a massive guide that breaks down 30+ interview questions, categorized by difficulty, with concise solutions and code examples.
Intermediate Concepts
Q15. The Memoization Trap: Why does a child component wrapped in React.memo still re-render? How do you fix it?
Solution: This is a classic performance trap! A component wrapped in React.memo only skips rendering if its props are the same as the last render (based on a shallow comparison). The component still re-renders if a prop changes.
The re-render happens when a parent component passes down non-primitive props, specifically functions or objects, defined inside the parent component.
The Problem: On every re-render of the Parent component, JavaScript recreates every function and object inside it. Even if the function's code hasn't changed, its memory reference is new.
The Failure: The React.memo check sees that the function prop is a new reference (oldFunction !== newFunction), so the shallow comparison fails, and the child re-renders unnecessarily.
The Fix: You must use useCallback to memoize the function reference and useMemo to memoize the object reference (if passing objects/arrays).
For Functions (Callbacks):
const handleClick = useCallback(() => { /* logic */ }, [dependency]);
// Passes the same function reference across renders.
For Objects/Arrays (Values):
const styleProps = useMemo(() => ({ color: 'blue', padding: 10 }), []);
// Passes the same object reference across renders.
By stabilizing the prop's reference, you allow React.memo to work as intended, stopping unnecessary re-renders in the child component.
Read the full guide here (30+ Questions & Solutions)
Top comments (0)