Understanding useCallback in Reactjs

The useCallback hook memoizes the function itself, not its return value. useCallback caches the function reference

A function declared inside a component gets re-created on every render, similar to a variable. The difference is, it gets rendered with a different reference every time. So,

• A useEffect dependent on this function will execute again on each render.
• A similar thing happens with child components.

A useEffect dependent on this function will execute again on each render:

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

// Parent Component
const ParentComponent = () => {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");

  // Function declared inside the component
  const handleClick = () => {
    setCount(count + 1);
  };

  // useEffect depending on handleClick
  useEffect(() => {
    console.log("handleClick changed, running useEffect");
  }, [handleClick]);

  return (
    <div>
      <button onClick={handleClick}>Increment Count</button>
      <p>Count: {count}</p>
      <ChildComponent handleClick={handleClick} />
    </div>
  );
};

// Child Component
const ChildComponent = React.memo(({ handleClick }) => {
  console.log("ChildComponent re-rendered");
  return <button onClick={handleClick}>Child Increment</button>;
});

export default ParentComponent;

A similar thing happens with child components:

When we have a component with expensive or "slow" rendering logic as a child of another component, every time the parent component renders, all of its children also re-render.

To prevent these unnecessary re-renders, we can use React.memo. This higher-order component caches the child component, ensuring that it only re-renders if its props actually change. However, there’s a subtle catch when passing functions as props, which causes the child to re-render even when it shouldn’t.

The Problem with Function References

Imagine we have a SlowComponent as a child of App. In App, we have a state that changes on button click, triggering a re-render of App. Although we’re not changing SlowComponent's props, it still re-renders on every click.

Why? On each render, the handleClick function is re-created with a new reference, which React interprets as a changed prop, causing SlowComponent to re-render. To fix this, we use the useCallback hook to cache the function's reference across renders.

Solution with useCallback

By wrapping handleClick inside useCallback, we tell React to only re-create it when specific dependencies change. Here’s the syntax:

const cachedFn = useCallback(fn, [dependencies]);

• fn: This is the function definition you want to cache. It can accept arguments and return any value.
• dependencies: This is an array of dependencies. React will re-create fn if any dependency changes. On the first render, React creates and caches the function. On subsequent renders, as long as the dependencies haven’t changed, the cached function is returned, ensuring it has a stable reference.

Applying useCallback in Our Example
Let’s take a look at how we’d use useCallback to optimize our App component:

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

const App = () => {
  const [count, setCount] = useState(0);
  const [value, setValue] = useState("");

  // Wrapping handleClick with useCallback to cache its reference
  const handleClick = useCallback(() => {
    setValue("Kunal");
  }, [setValue]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <p>Count: {count}</p>
      <SlowComponent handleClick={handleClick} />
    </div>
  );
};

const SlowComponent = React.memo(({ handleClick }) => {

// Intentially making the component slow
  for (let i = 0; i < 1000000000; i++) {}
  console.log("SlowComponent re-rendered");
  return <button onClick={handleClick}>Click me in SlowComponent</button>;
});

export default App;

When to use useCallback

• When you have event handlers defined for an element inside your component, wrap them inside a useCallback to avoid unnecessary re-creations of event handlers.
• When you call a function inside a useEffect, you usually pass the function as a dependency. To avoid using useEffect unnecessarily on every render, wrap the function definition inside a useCallback.
• If you are writing a custom hook, and it returns a function, it is recommended to wrap it inside a useCallback. So, there's no need for the users to worry about optimizing the hook – rather, they can focus on their own code.