React Performance: useMemo vs useCallback vs React.memo — When to Use Each

React Performance: useMemo vs useCallback vs React.memo These three optimization tools confuse most React developers. Used correctly, they prevent unnecessary re-renders. Used incorrectly, they add overhead without benefit. Here's a precise guide to when each one helps. The Core Problem: Referential Equality React re-renders a component when its props or state change. The tricky part: JavaScript objects and functions are compared by reference, not value. // New render → new function reference function Parent () { // handleClick is a NEW function on every render const handleClick = () => console . log ( ' clicked ' ); // Even though handleClick "looks" the same, it's a new reference // This causes Child to re-render every time Parent renders return < Child onClick = { handleClick } /> ; } This is why useMemo , useCallback , and React.memo exist: to stabilize references across renders. React.memo: Memoize Component Renders React.memo wraps a component and prevents re-renders when props h