React useCallback Hook

In this part, we will learn about React useCallback hook. The React useCallback returns a memoized function when the dependency array gets changed. The word ‘memoized‘ or ‘memoization’ is an optimization technique to speed up expensive function calls by returning cached results instead of re-computing. basically, it’s like cache memory which is used to speed up your browser, something like that.

React useCallback hook is basically used when we want to avoid function re-call again and again and when we need to speed up our application, hence it helps us to gain performance.

React useCallback Hook

Syntax

useCallback(() => {
 myCallbackFunction()
}, [dependencies]);

In React useCallback hook, we have to pass an inline callback and an array of dependencies. useCallback will return a memoized callback that only changes when any dependencies gets changed, with this we prevent re-rendering functions. This is pretty useful when we need optimization.

It is not necessary to pass something to an array of dependencies, you can also pass a blank array.

Note: The dependencies array is not passed as an argument to callback function. Conceptually, that’s what they represent: every referenced value should be passed in the dependencies array.

Let’s understand the whole thing using an example,

Problem Without React useCallback

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;

The problem is raised here without callback is, if we change some value, then all present states will get re-rendered. Instead of that, we want that, only those state should re-render which got affected by change in value others should be untouched. Since we have basic and small example, we can’t see some visual delay here. But if we had large application then delay will be massive depends on how large application is. So it will be good practice to work with useCallback hook in your application.

Solution with React useCallback

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;

With the help of callback, let’s say if we increment the counter then only that function will render rest of the function will be remains untouched and resulting render will be much faster. This is the main feature of useCallback.