React js useCallback Hook Tutorial with Example

In this tutorial i will discuss about react hook useCallback. The react hook useCallback returns a memoized callback. Wrapping a component with React.Memo() signals the intent to reuse code. This does not automatically extend to functions passed as parameters.

Remember

  • useCallback returns a memoized version of a callback.

  • useCallback accepts as arguments a callback and a dependencies array.

  • The callback only changes if one of the dependencies has changed.

 

useCallback example

The following example will clear your concept of useCalback hook!

 

In the above example, the parent component, < Age / >, is updated (and re-rendered) whenever the Get older button is clicked.

And also consequently, the < Instructions / > child component is also re-rendered because the doSomething prop is passed a new callback with a new reference.

Point to be noted that even though the Instructions child component uses React.memo to optimize performance, it is still re-rendered.

So now how can this be fixed to prevent < Instructions / > from re-rendering needlessly?

useCallback with referenced function

 

 

Read also : React js useEffect Hook Tutorial with Example

 

Hope it can help you.

 

Facebook Github
A web enthusiastic, a self-motivated full-stack software engineer from Dhaka, Bangladesh with experience in developing applications using Laravel , React and Vue js