Understanding useMemo vs. useCallback in React: A Simple Guide with Code Examples

Photo by Brett Jordan on Unsplash

React is a popular JavaScript library for building user interfaces, and it provides developers with a variety of tools to optimize the performance of their applications. Two of these tools are useMemo and useCallback, which help prevent unnecessary re-renders in your components. In this article, we'll explore what these hooks do, how they differ, and when to use each one with straightforward code examples.

What is useMemo?

useMemo is a React hook used to memoize (or cache) the result of a computation. It takes two arguments: a function and an array of dependencies. The function contains the computation you want to memoize, and the array of dependencies lists the values that, when changed, trigger the re-computation.

Here’s a simple example:

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

function App() {
  const [count, setCount] = useState(0);
  const squaredValue = useMemo(() => {
    return count * count;
  }, [count]);
  return (
    <div>
      <p>Count: {count}</p>
      <p>Squared Value: {squaredValue}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}
export default App;

In this example, squaredValue is computed using useMemo. The computation (squaring count) will only occur when count changes. If you click the "Increment" button, count changes, and squaredValue is recalculated.

What is useCallback?

useCallback is another React hook that memoizes functions. It is especially useful when you need to pass functions as props to child components. Like useMemo, it takes a function and an array of dependencies, but it returns a memoized version of the function rather than a value.

Here’s an example of how useCallback can be used:

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

function ChildComponent({ handleClick }) {
  return <button onClick={handleClick}>Click Me</button>;
}
function App() {
  const [count, setCount] = useState(0);
  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);
  return (
    <div>
      <p>Count: {count}</p>
      <ChildComponent handleClick={handleClick} />
    </div>
  );
}
export default App;

In this example, the handleClick function is memoized using useCallback. This ensures that the handleClick function doesn't change unless the count dependency changes, preventing unnecessary re-renders of the ChildComponent.

When to use useMemo and useCallback?

• useMemo: Use it when you want to memoize a value that is derived from other data and you don't want it to recalculate on every render. This is helpful for optimizing expensive calculations or preventing unnecessary rendering of components.
• useCallback: Use it when you want to memoize a function, especially if that function is passed as a prop to child components. It ensures that the function reference remains stable between renders, preventing child components from re-rendering when the parent re-renders.

In summary, useMemo is for memoizing values, while useCallback is for memoizing functions. Both hooks are essential tools for optimizing your React applications and improving performance by minimizing unnecessary re-renders. By understanding when and how to use them, you can make your React components more efficient and responsive.