useMemo vs useCallback in React: Difference and Trade Off

useMemo and useCallback are two important hooks in React that help optimize performance by memoizing values and functions, respectively. While they may seem similar, they serve different purposes based on the data they handle.

In this blog, we delve into finding out the key differences between useMemo vs useCallback hook in react, 

Table of Content

1. Understanding useMemo Hook
2. Understanding useCallback Hook
3. useMemo vs useCallback: What is the Difference
   • Key Differences
   • Code Example
4. Understand When to Choose One Over Other

Understanding useMemo Hook

useMemo is used to memoize values or computations and recompute them only when one of the dependencies has changed. It is helpful when you need to calculate a value that is computationally expensive and should not be recalculated on every render.

For example, consider a scenario where you want to calculate a factorial of a number:

const factorial = useMemo(() => {
  return calculateFactorial(number);
}, [number]);

• It takes a function that computes the value as the first argument.
• The second argument is an array of dependencies. The value will only be recomputed when these dependencies change.

Understanding useCallback Hook

useCallback is used to memoize functions, primarily for optimizing performance in child components that rely on reference equality. It returns a memoized version of the callback function that only changes if one of the dependencies has changed.

For example, in a scenario where you have a handler function for a button click:

const handleClick = useCallback(() => {
  console.log('Button clicked!');
}, []);

• It takes a callback function as the first argument.
• The second argument is an array of dependencies. The callback will only be recreated if any of these dependencies change.

useMemo vs useCallback: What is the Difference

Area	useMemo	useCallback
Usage	Used to memoize a value	Used to memoize a function
Dependencies	Depends on an array of dependencies	Depends on an array of dependencies
Return	Returns a memoized value	Returns a memoized callback function

Key Differences

• useMemo: Memoizes a value and returns it. It helps in avoiding expensive calculations on every re-render.
• useCallback: Memoizes a function and returns it. Useful when passing callbacks to child components to prevent unnecessary re-renders.

Code Example

import React, { useMemo, useCallback, useState } from 'react';

const Component = () => {
  const [count, setCount] = useState(0);

  // Memoize value
  const memoizedValue = useMemo(() => {
    return count * 2;
  }, [count]);

  // Memoize Function
  const memoizedCallback = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    div>
      p>Memoized Value: {memoizedValue}/p>
      button onClick={memoizedCallback}>Increment/button>
    /div>
  );
};

export default Component;

Use Cases

• useMemo: When you have a computationally expensive operation that depends on specific values and you want to avoid recalculating that value on every render.
• useCallback: When passing callbacks to child components, and you want to prevent unnecessary re-renders by memoizing the function.

Understand When to Choose One Over the Other

Choose useMemo when you need to memoize a value that depends on specific dependencies to avoid unnecessary recalculations. Use useCallback when you need to memoize a function, especially when passing it as a prop to child components, to prevent them from re-rendering on parent component updates.

Understanding the differences and use cases of useMemo and useCallback can significantly improve the performance and maintainability of your React applications.

Further Reading

1. 100+ Top React JS Questions and Answers
2. 20 Most Asked Custom Hooks in React
3. useState vs useReducer in React
4. useEffect vs useLayoutEffect in React