Using useMemo and useCallback to Avoid Re-renders in React

Understanding Re-renders in React

React re-renders components when their state or props change to update the UI.

However, sometimes components re-render even when the output does not change, leading to wasted processing.

Avoiding unnecessary re-renders can improve app responsiveness and reduce CPU usage.

• State or props changes trigger re-renders.
• Functions and objects are recreated on every render by default.
• Passing new function or object references causes child components to re-render.

Using useMemo to Memoize Values

useMemo is a React hook that memoizes the result of a function and recomputes it only when dependencies change.

It is useful for expensive calculations or creating stable object references to prevent child re-renders.

• Syntax: const memoizedValue = useMemo(() => computeValue(), [dependencies]);
• The function inside useMemo runs only when dependencies change.
• Memoized values keep the same reference between renders if dependencies are unchanged.

Using useCallback to Memoize Functions

useCallback returns a memoized version of a callback function that only changes if its dependencies change.

This is useful when passing callbacks to child components to prevent unnecessary re-renders.

• Syntax: const memoizedCallback = useCallback(() => { doSomething(); }, [dependencies]);
• Memoized callbacks keep the same reference between renders if dependencies are unchanged.
• Helps optimize components wrapped in React.memo or pure components.

When to Use useMemo and useCallback

Use memoization hooks when:

You have expensive computations that should not run on every render.

You pass functions or objects as props to memoized child components.

Avoid using them prematurely; measure performance first.

• Memoize expensive calculations with useMemo.
• Memoize functions passed to children with useCallback.
• Do not memoize everything; it can add complexity and overhead.