useCallback is a hook that helps you memoize a function so that it is not re-created on every render, improving performance, especially in child components that rely on props.

In React, passing functions down to child components can cause unnecessary re-renders. This is where useCallback comes in to prevent re-creating the same function on each render, optimizing performance.

Syntax 

const memoizedCallback = useCallback(() => {
  // function logic
}, [dependencies]);
  • The first argument is the function you want to memoize.
  • The second is the dependency array — the function will only be re-created if one of these dependencies changes.

Example

Let's see what useCallback can solve — live in action!

Here’s a simple component where a button click triggers a function:

import React, { useState } from 'react';

const Child = ({ handleClick }) => {
  console.log("Child re-rendered");
  return <button onClick={handleClick}>Click mebutton>;
};

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

  const handleClick = () => {
    console.log("Button clicked");
    setCount(count + 1);
  };

  return (
    <div>
      <Child handleClick={handleClick} />
      <p>Count: {count}p>
    div>
  );
};

Can you spot the issue here?

Every time the Parent component re-renders (for example, when count changes), the handleClick function is re-created, even if its logic doesn’t change. This causes the Child component to re-render unnecessarily.

Now, let’s fix that by using useCallback:

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

const Child = ({ handleClick }) => {
  console.log("Child re-rendered");
  return <button onClick={handleClick}>Click mebutton>;
};

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

  const handleClick = useCallback(() => {
    console.log("Button clicked");
    setCount(count + 1);
  }, [count]); // Only re-create the function if `count` changes

  return (
    <div>
      <Child handleClick={handleClick} />
      <p>Count: {count}p>
    div>
  );
};

How Does it Help?

By using useCallback, React will memoize the handleClick function, meaning it won’t be re-created on each render unless count changes. This prevents unnecessary re-renders of the Child component and optimizes performance.

Complete Code: 

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

const Child = ({ handleClick }) => {
  console.log("Child re-rendered");
  return <button onClick={handleClick}>Click mebutton>;
};

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

  const handleClick = useCallback(() => {
    console.log("Button clicked");
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <Child handleClick={handleClick} />
      <p>Count: {count}p>
    div>
  );
};

When Should You Use useCallback?

  • When passing functions to child components that trigger re-renders.
  • When you want to prevent re-creating functions unnecessarily.
  • When functions are part of a list or passed to deeply nested components.

When Shouldn't You Use useCallback?

  • Don’t overuse useCallback if your function doesn’t affect performance. If your function runs fast and doesn't cause re-renders, useCallback might add unnecessary complexity.
  • Avoid using it when the dependency array changes frequently, as it defeats the purpose of memoization.

Comparing useCallback with Similar Hooks

There are a few hooks in React that developers tend to confuse with each other, especially when it comes to performance optimizations. Here's a breakdown:

useMemo vs useCallback

Both useMemo and useCallback are used for memoization, but they apply to different types of data:

  • useMemo is used to memoize values that are the result of a function, like calculations or processed data.

Example:

const filteredData = useMemo(() => expensiveCalculation(data), [data]);
  • useCallback is used to memoize functions. It’s useful when you need to pass a stable reference to a function to child components, preventing unnecessary re-renders.

Example:

const memoizedCallback = useCallback(() => doSomething(value), [value]);

useEffect vs useCallback

useEffect and useCallback are quite different in terms of functionality:

  • useEffect is used for side effects, such as fetching data, subscribing to an event, or modifying the DOM. It runs after the render.

Example:

useEffect(() => {
    fetchData();
  }, [query]);
  • useCallback, on the other hand, is specifically for memoizing functions. It’s used when you want to keep a reference to a function across re-renders without it changing unless its dependencies change.

useMemo vs useEffect

Both useMemo and useEffect can be used for optimizing performance, but their use cases are quite different:

  • useMemo is for values that are expensive to calculate, but only need to be recalculated when specific dependencies change.

Example:

const expensiveValue = useMemo(() => complexCalculation(data), [data]);
  • useEffect is for running side effects after a render, which could include things like fetching data or manually changing the DOM.

Example:

useEffect(() => {
    console.log("Component rendered");
  }, []);

Summary

  • Use useMemo when you need to memoize values or complex calculations to avoid redundant re-renders.
  • Use useCallback when you need to prevent the re-creation of functions between renders.
  • Use useEffect for handling side effects in your components, like fetching data or setting up subscriptions.

Remember, it’s crucial not to overuse these hooks. While they help with performance, they also add complexity to your code. Always consider the actual impact of your changes on performance before implementing them.