How to use useCallback React hook

Find out what the useCallback React hook is for and how to use it!

Look at mineIntroduction to React hooksFirst of all, if you are a novice to them.

One of the React hooks I sometimes use isuseCallback.

import React, { useCallback } from 'react'

This hook is useful when your component has components that frequently re-render children and pass callbacks to them:

import React, { useState, useCallback } from 'react'

const Counter = () => { const [count, setCount] = useState(0) const [otherCounter, setOtherCounter] = useState(0)

const increment = () => { setCount(count + 1) } const decrement = () => { setCount(count - 1) } const incrementOtherCounter = () => { setOtherCounter(otherCounter + 1) }

return ( <> Count: {count} <button onClick={increment}>+</button> <button onClick={decrement}>-</button> <button onClick={incrementOtherCounter}>incrementOtherCounter</button> </> ) }

ReactDOM.render(<Counter />, document.getElementById(‘app’))

The problem here is that every time the counter is updated, all 3 functions are recreated.

You can instantiate aSet up the data structure, And add each feature to it. Why set? Because it only stores unique elements, in our case this means different (only instantiated) functions.

import React, { useState, useCallback } from 'react'

const functionsCounter = new Set()

const Counter = () => { const [count, setCount] = useState(0) const [otherCounter, setOtherCounter] = useState(0)

const increment = () => { setCount(count + 1) } const decrement = () => { setCount(count - 1) } const incrementOtherCounter = () => { setOtherCounter(otherCounter + 1) }

functionsCounter.add(increment) functionsCounter.add(decrement) functionsCounter.add(incrementOtherCounter)

alert(functionsCounter)

return ( <> Count: {count} <button onClick={increment}>+</button> <button onClick={decrement}>-</button> <button onClick={incrementOtherCounter}>incrementOtherCounter</button> </> ) }

ReactDOM.render(<Counter />, document.getElementById(‘app’))

If you try to use this code, you will see the alert increase by 3 at a time.

Instead, what should happen is that if you increment a counter, all functions related to that counter should be re-instantiated.

If another status value has not changed, you should not touch it.

Now, in most cases, this is not a big problem, unless you pass many different functions, all of which are changing irrelevant data bits, which turns out to be a high price for your application performance .

If there is a problem, you can useuseCallback.

This is our approach. instead:

const increment = (() => {
  setCount(count + 1)
})
const decrement = (() => {
  setCount(count - 1)
})
const incrementOtherCounter = (() => {
  setOtherCounter(otherCounter + 1)
})

Wrap all these calls in:

const increment = useCallback(() => {
  setCount(count + 1)
}, [count])
const decrement = useCallback(() => {
  setCount(count - 1)
}, [count])
const incrementOtherCounter = useCallback(() => {
  setOtherCounter(otherCounter + 1)
}, [otherCounter])

Make sure you add the array as the second parameter touseCallback()With the desired state.

Now, if you try to click on one of the counters, only the functions related to changing the state will be reinstantiated.

You can try the following examples on Codepen:

Look at the penReact useCallback hookBy Flavio Copes (@flaviocopes) InCipher pen.

Tech Wiki Online!