Loading...
See how React.memo, useMemo, and useCallback prevent unnecessary work with an interactive visualization. Step through dependency checks, cache hits and misses, and which components skip re-renders.
Loading visualization...
React.memo, useMemo, and useCallback let you skip unnecessary work by caching component output, computed values, and function references between renders.
React re-renders a component whenever its parent re-renders, even if the component's own props have not changed. Memoization APIs give you tools to opt out of this default behavior when the cost is measurable.
React.memo wraps a component and shallow-compares incoming props against the previous props. If all props are equal by Object.is, React reuses the last render output and skips the component function entirely.
useMemo caches a computed value between renders. It accepts a factory function and a dependency array; the factory only re-runs when at least one dependency changes. useCallback is a shorthand for memoizing a function reference.
Interview framing: define Memoization in one sentence, then explain one concrete runtime behavior and one common pitfall with a short code example.
Adding React.memo, useMemo, or useCallback everywhere adds overhead (dependency comparisons, cache storage) without measurable benefit. Most components are cheap to re-render.
Fix: Profile first. Only memoize when you can measure a performance problem: expensive computations, large subtrees that re-render often, or components that appear in lists.
Writing <Child style={{ color: 'red' }} /> creates a new object every render, so React.memo always sees different props and never skips.
Fix: Hoist constant objects outside the component, or wrap dynamic objects in useMemo so the reference stays stable when the values have not changed.
Omitting a dependency causes the cached value to go stale. The hook returns an outdated result that does not reflect the current state or props.
Fix: Always include every value from the component scope that the factory reads. Use the react-hooks/exhaustive-deps ESLint rule to catch missing deps automatically.
Common interview prompts with concise model answers.
useMemo caches the return value of a function, while useCallback caches the function itself. useCallback(fn, deps) is equivalent to useMemo(() => fn, deps). useCallback is typically used to stabilize callback references passed to memoized children.
// useMemo: caches computed value
const total = useMemo(() => items.reduce((s, i) => s + i.price, 0), [items]);
// useCallback: caches function reference
const handleClick = useCallback(() => { doSomething(id); }, [id]);Use React.memo when a component receives the same props frequently but its parent re-renders often, the component's render is expensive, or the component appears many times in a list. Always measure before and after to confirm the optimization helps.
By default, React.memo does a shallow comparison using Object.is on each prop. Primitives are compared by value; objects and functions are compared by reference. You can pass a custom comparison function as the second argument for deeper checks.
// Default: shallow comparison
const MemoChild = React.memo(Child);
// Custom: deep comparison on specific prop
const MemoChild = React.memo(Child, (prev, next) =>
prev.config.id === next.config.id
);If you pass no dependency array, useMemo recalculates on every render, providing no caching benefit. If you pass an empty array [], it calculates once on mount and never recalculates, similar to a component-scoped constant.
Continue with these concepts to strengthen your mental model.
const MemoChild = React.memo(({ name }) => { return <p>Hello, {name}</p>;}); function Parent() { const [count, setCount] = useState(0); return ( <div> <p>{count}</p> <button onClick={() => setCount(c => c + 1)}> + </button> <MemoChild name="Alice" /> </div> );}waiting
no cache entries yet
no render decisions yet