useCallback Hook in React

useCallback

useCallback is a React hook that is used to memoize functions. It ensures that a function reference does not change between renders unless its dependencies change.

This can improve performance by preventing unnecessary re-creation of functions and subsequent re-rendering of components.

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

• Input Parameters

  • fn: The function value that you want to cache. It can take any arguments and return any values.
  • dependencies: The list of all reactive values referenced inside of the fn code.

• Returns

  • On the initial render, useCallback returns the fn (not call!) function you have passed.
  • During subsequent renders, it will either return an already stored fn function from the last render (if the dependencies haven’t changed), or return the fn function you have passed during this render.

---

Basic Usage

Without useCallback, this function increment in the below example would be re-created on every render.

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

function Counter() {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount((prevCount) => prevCount + 1);
  }, []);

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

---

Usecases

Skipping rerendering of components

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

// Wrapping the component with React.memo to prevent unnecessary re-renders
const ExpensiveComponent = memo(({ compute, count }) => {
  console.log("Rendering ExpensiveComponent");
  return <div>Result: {compute(count)}</div>;
});

function App() {
  const [count, setCount] = useState(0);

  // Memoizing the compute function
  const compute = useCallback((num) => {
    console.log("Computing...");
    return num * 2;
  }, []);

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

export default App;

Explanation of above example,

1. React.memo: ExpensiveComponent is wrapped with React.memo. This ensures that the component re-renders only when its props (compute or count) change.

2. Why useCallback Helps: The compute function is memoized using useCallback, so its reference remains stable between renders as long as its dependencies don't change.

3. Effect of Memoization: Since the compute function reference doesn't change, React.memo prevents unnecessary re-renders of ExpensiveComponent unless count changes.

---

Best Practices

• Use useCallback only when passing callbacks to optimized child components (e.g., wrapped with React.memo).

• If you’re writing a custom Hook, it’s recommended to wrap any functions that it returns into useCallback. This ensures that the consumers of your Hook can optimize their own code when needed.

• Don’t use useCallback on every function; it adds complexity and may not provide significant benefits for simple components.

---

useMemo vs useCallback

Feature	useMemo	useCallback
Purpose	Memoizes the result of a function, preventing unnecessary recalculations.	Memoizes a callback function, preventing unnecessary re-creation on renders.
Syntax	const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);	const memoizedCallback = useCallback(() => { /* logic */ }, [dependency]);
Input	Takes a function (with no input parameters) and a dependency array ([dependencies]).	Takes a callback function (with any number of input parameters) and a dependency array.
Behavior	Calls the provided function immediately and stores the computed value.	Does not call the provided function; only returns the memoized version of the callback function.
Use Case	Useful when you have a heavy computation inside a component and you want to avoid re-executing it on every render.	Useful when you want to prevent unnecessary re-renders of child components that rely on callback functions as props. It's commonly used in combination with React.memo or shouldComponentUpdate to optimize rendering.