How to Use useMemo and useCallback Hooks

Every time a React component re-renders, all the code inside the component function runs again from scratch. This means expensive calculations run repeatedly and new function references are created on every render. This can cause child components to re-render unnecessarily even when their data has not changed.

Memoization is a technique where you cache the result of a function call and return the cached result when the same inputs occur again instead of recomputing. React provides useMemo to memoize values and useCallback to memoize functions.

Wrap an expensive calculation with useMemo by passing a function that performs the calculation and a dependency array. React runs the calculation on the first render and caches the result. On subsequent renders, it only recomputes if a value in the dependency array has changed. Otherwise it returns the cached value.

useMemo has its own overhead so it is not always beneficial. Use it when the calculation is genuinely expensive, such as filtering or sorting a large array, or performing complex math. Do not wrap every calculation in useMemo. Profile first and optimize only where you see measurable slowness.

useCallback memoizes a function definition rather than a value. Wrap a function with useCallback and provide a dependency array. React returns the same function reference between renders as long as none of the dependencies have changed. This is crucial when passing functions as props to child components.

In JavaScript, two functions with identical code are not equal to each other because they are different objects in memory. If you pass a function as a prop to a child component wrapped in React.memo, the child re-renders every time the parent renders because the function reference changes. useCallback prevents this by keeping the same reference.

useCallback is most useful in combination with React.memo. Wrap the child component with React.memo so it only re-renders when its props change. Then use useCallback in the parent to ensure the function prop reference stays stable. Together they prevent the child from re-rendering unnecessarily.

Both useMemo and useCallback require accurate dependency arrays. Include every variable from the component scope that is referenced inside the memoized function or calculation. An incorrect dependency array causes stale values to be returned, which leads to subtle bugs that are difficult to track down.