ReactJs useCallback Hook

Syntax

const memoizedCallback = useCallback(
  () => {
    // function body
  },
  [dependency],
);

Example

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

function App() {
  const [count, setCount] = useState(0);
  const handleIncrement = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
}

Output

The output of the above example will be a web page with a heading "Count: X" and a button "Increment". Clicking the button will increment the count by one.

Explanation

The useCallback hook is used to memoize a callback function. It returns a memoized version of the callback function that only changes if one of the dependencies has changed. This can help optimize performance, especially with components that use a lot of callbacks or are frequently re-rendered.

The useCallback hook is useful when passing callbacks to child components, as it can prevent unnecessary re-renders when the parent component re-renders.

In the example above, we use useCallback to memoize the handleIncrement function, which only changes when the count state changes. This prevents unnecessary re-renders of the App component when the button is clicked.

Use

The useCallback hook should be used when you need to memoize a callback function. This can help optimize performance and prevent unnecessary re-renders of components.

It takes two parameters: the callback function to be memoized, and an array of dependencies. The callback function is only re-created when one of the dependencies has changed.

Important Points

• useCallback should not be overused, as it can add unnecessary complexity to your code. Only use it when you need to memoize a callback function.
• Be careful when using objects or arrays as dependencies, as they are compared by reference. If you need to update an object or array in the dependency array, you should create a new instance to trigger a change.

Summary

In summary, the useCallback hook is used to memoize a callback function in React. It can help optimize performance and prevent unnecessary re-renders of components. Use it when you need to memoize a callback function, and be careful when using objects or arrays as dependencies.