useCallback Hooks

The useCallback hook is used when you have a component in which the child is rerendering again and again without need.

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. This is useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders.

Syntax:

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

Example: 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.

Javascript

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);
    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;

Output:

Performance Hooks in React

While developing React Applications, optimizing performance is one of the most important things for delivering a seamless user experience. One common way to boost performance is to minimize unnecessary re-renders by skipping repetitive calculations. React provides two powerful hooks, useMemo and useCallback, which helps you to achieve optimization by caching results and function definitions, respectively. In this article, we’ll learn about the functionalities of these hooks and explore how they can be effectively utilized to enhance React application performance.

We will discuss about the following Performance Hooks in React:

Table of Content

useMemo Hook
useCallback Hooks

Both useMemo and useCallback are part of React’s hooks API introduced in React 16.8. While they serve different purposes, they share a common goal of optimizing performance by memoizing values and functions.

Tags:

#React-Hooks #ReactJS #Web Technologies

useMemo Hook

useCallback Hooks

Syntax:

Javascript

Performance Hooks in React

Similar Reads