In this lesson, you will learn another method of adding memoization to your React app. One way to use memoization in React applications is by using the useCallback Hook. The useCallback hook is a built-in React hook that is used to memoize callback functions.

Like all memoization techniques, it prevents unnecessary re-renders of child components that rely on these callback functions as props. The useCallback hook helps mitigate re-rendering whenever state or props change, by returning a memoized version of the callback function that only changes if one of its dependencies has changed.

The useCallback Hook Syntax

The syntax for the useCallback Hook is as follows:

const memoizedCallback = useCallback(() => {
  // Function logic
}, [dependencies]);

In this syntax,

• memoizedCallback: This variable holds the memoized version of the callback function. It will be updated only when one of the dependencies changes.
• useCallback: This is the hook itself, which takes two arguments:
  • A function that contains the logic you want to memoize.
  • An array of dependencies that the function depends on. If any of these dependencies change, the memoized function will be recreated.

Example

Here’s an example demonstrating how to use useCallback to prevent unnecessary re-renders of a child component:

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

// Child component that receives a callback as a prop
const ChildComponent = React.memo(({ onClick }) => {
  console.log("Rendering ChildComponent");
  return <button onClick={onClick}>Click Me</button>;
});

const ParentComponent = () => {
  const [count, setCount] = useState(0);
  const [otherState, setOtherState] = useState(false);

  // Memoizing the callback function
  const handleClick = useCallback(() => {
    console.log("Button clicked!");
  }, []); // No dependencies, so the function will not change

  return (
    <div>
      <h1>Count: {count}</h1>
      <ChildComponent onClick={handleClick} />
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <button onClick={() => setOtherState(!otherState)}>Toggle Other State</button>
    </div>
  );
};

export default ParentComponent;

In this code example,

• The ChildComponent is wrapped with React.memo, which prevents it from re-rendering unless its props change.

• The handleClick function is memoized using useCallback. Since it has no dependencies, it will remain the same across renders.

• When the Increment Count button is clicked, the ParentComponent re-renders, but the ChildComponent does not re-render because the onClick prop (the memoized handleClick function) remains the same.

• The console log for "Rendering ChildComponent" will only appear when the ChildComponent is first rendered, demonstrating the effectiveness of useCallback in preventing unnecessary re-renders.

In summary, the useCallback hook is another powerful tool for optimizing performance in React applications by memoizing callback functions.