Optimization Interview Questions

Learn how to create a custom debounce function that supports leading-edge, trailing-edge, or both firing modes.

Learn how memory leaks occur in single-page apps, how to diagnose them with Chrome DevTools, and how to fix common leak sources.

A pure component skips re-rendering when its props and state are shallowly equal to the previous render. PureComponent is the class equivalent; React.memo is the function component equivalent. Both perform shallow equality checks — object and function prop references must be stable or the optimization is bypassed.

React re-renders a component when its state changes, its props change, or its parent re-renders. The third trigger cascades through entire subtrees by default. Reconciliation limits DOM mutations. Memoization prevents component function calls. Profile before optimizing.

useCallback memoizes a function reference so child components wrapped in React.memo skip re-rendering when the parent re-renders. Without React.memo on the child, useCallback adds overhead with no benefit. The dependency array must include every value the callback closes over.

useMemo caches the return value of a factory function and recomputes only when listed dependencies change. It prevents unrelated state changes from re-triggering expensive computations. It does not make a slow computation fast — when the dependency that drives the expense changes, the work runs regardless.