Open In App

React useCallback Hook

Last Updated : 23 Feb, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

React useCallback hook returns a memoized function to reduce unnecessary callbacks. This useCallback hook is used when you have a component in which the child is rerendering again and again without need.

React useCallback Hook

Pass an inline callback and an array of dependencies, useCallback will return a memoized version of the callback that only changes if one of the dependencies has changed.

React useCallback Hook Syntax:

const memoizedCallback = useCallback(
() => {
doSomething(a, b);
}, [a, b],
);

React useCallback Hook Usage

  • This is useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders.
  • It improves the performance by reducing the unnecessary computations and providing already stored callback.
  • It is similar to React useMemo Hook, the difference is it returns a callback and useMemo returns a value.

Note: Memoization is like storing the values as cache that need not to be calculated again and again.

Without using the useCallback Hook

The problem is that once the counter is updated, all three functions are recreated again. The alert increases by three at a time but if we update some states all the functions related to that states should only re-instantiated. If another state value is unchanged, it should not be touched.

Example without the useCallback Hook:

This example creates a counter app without using the useCallback Hook.

Javascript




// Filename - App.js
 
import React, { useState, useCallback } from 'react';
const funccount = new Set();
const App = () => {
 
 
  const [count, setCount] = useState(0)
  const [number, setNumber] = useState(0)
 
  const incrementCounter = () => {
    setCount(count + 1)
  }
  const decrementCounter = () => {
    setCount(count - 1)
  }
   
   const incrementNumber = () => {
    setNumber(number + 1)
  }
   
funccount.add(incrementCounter);
funccount.add(decrementCounter);
funccount.add(incrementNumber);
alert(funccount.size);
 
  return (
    <div>
      Count: {count}
      <button onClick={incrementCounter}>
        Increase counter
      </button>
      <button onClick={decrementCounter}>
         Decrease Counter
      </button>
      <button onClick={incrementNumber}>
        increase number
      </button>
    </div>
  )
}
 
 
export default App;


This example has a problem of re-rendering even when the props aren.t changed. This can be solved by using the useCallback Hook.

Using React useCallback Hook

To solve this problem we can use the useCallback hook.

React useCallback Hook Example:

This example demonstrate the use of useCallback Hook.

Javascript




// Filename - App.js
 
import React, { useState, useCallback } from "react";
var funccount = new Set();
const App = () => {
    const [count, setCount] = useState(0);
    const [number, setNumber] = useState(0);
 
    const incrementCounter = useCallback(() => {
        setCount(count + 1);
    }, [count]);
    const decrementCounter = useCallback(() => {
        setCount(count - 1);
    }, [count]);
    const incrementNumber = useCallback(() => {
        setNumber(number + 1);
    }, [number]);
 
    funccount.add(incrementCounter);
    funccount.add(decrementCounter);
    funccount.add(incrementNumber);
    return (
        <div
            style={{
                display: "flex",
                flexDirection: "column",
                textAlign: "center",
                justifyContent: "end",
                margin: "auto",
                marginTop: "20px",
                width: "350px",
                padding: "50px",
                height: "300px",
                fontSize: "20px",
                boxShadow: "0px 2px 8px 4px grey",
                borderRadius: "5px",
            }}
        >
            {" "}
            <h2 style={{ color: "green" }}>
                GeeksforGeeks
            </h2>
            <h4>React Example for useCallback Hook</h4>
            <p>Count: {count}</p>
            <p>Function Count: {funccount.size}</p>
            <button onClick={incrementCounter}>
                Increase counter
            </button>
            <button onClick={decrementCounter}>
                Decrease Counter
            </button>
            <button onClick={incrementNumber}>
                Increase number
            </button>
        </div>
    );
};
 
export default App;


Output: As we can see from the below output when we change the state ‘count’ then two functions will re-instantiated so the set size will increase by 2 and when we update the state ‘number’ then only one function will re-instantiated and the size of the set will increase by only one.

React useCallback Hook Example - Output



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads