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 haven't