How to use UseCallback hook in react?

 Introduction

The react useCallback hook is used for the performance optimization and it memoized the function which doesn't cause the re-render of component , if one of the dependency is not changed.

You can think memoized as cached the function instance so it doesn't need to re-calculate the resource intensive function.

UseMemo and useCallback both are used for the performance optimization but the main difference between them is useMemo memoized or cached the value and the useCallback cached the function instance.

Let's look at the example of the useCallback to make it better understand by you.

In this example below , I have created a small react app where todo will be stored and the addNewTodo is the function which add the todo whenever in the todo component todo added , there is also and increment which increment the count and both todo and the count value are shown in the web browser.

So , the problem is whenever we increment the count addNewTodo function also call which render the Todo child component every time we increments the count.

To prevent this behavior , we fold the component into the React. memo() which only re-render the child component whenever some prop changes , even after wrap with this method the addNewTodo function calls and the component re-renders, this is because of some referential equality in javascript where javascript object when compared always be false even there values remains the same.

let obj1 = {1,2.3}
let obj2 = {1,2,3}
obj1==obj2 --> false

So, in this case we need to use useCallback() hook which memoized the function instance and also care about the referential equality ,

let obj1 = {1,2,3)
let obj2 = {1,2,3}

obj1 = obj2
obj1 == obj2 -->true

This is what useCallback do , it stores the function and compare the function with the cached function instance. 






Now, wrap the addNewTodo function into the useCallback hook will only re-render when the addNewTodo function changed and will not render unnecessarily.



That's how we will use UseCallback hook and it prevents the unnecessary re-render with functions . I hope this blog clears your understanding with useCallback hook and will also share the code Sandbox link so you can practically look at the implementation and play with the code.

Thank you for reading the blog post!

Comments

Post a Comment

Popular posts from this blog

Learn React Router v6 ( Part - 2)

Image
  Introduction In this section of react-router learning we can explore how we can read the data from the backend apis and send http request with the react router with the different functionalities  .  Data fetching and sending data back to the server is the most important process which react router make simpler and easier to understand providing error handling , fetching data , sending data , loader etc. Let's explore some advance concepts of react router makes react developers more simpler. 1) Loader  Loader loads the data from the backend apis and we can use the loaded data in our react web applications. We cannot send http requests back to the server instead get the data from the server and just use them to display some lists or information in the components We have two steps to implement loader into the system . First step :- We need to define the loader property in the route definitions object to load the data . This takes the function as a parameter where ...
Read more

Why use Typescript ?

Introduction When I was using JavaScript , there is an inside joke in our team if you don't know coding then you need to use typescript . As Typescript provides you the types that make you write better code with less mistakes before compilation.  It's all good using typescript but seriously why even barely use typescript for just types , if you know what you are coding , and know all you variables because you give them good naming that make you help understand the code of which is used for.   Obviously , if you write exactly you wanted and you are a solo developer without any team or any interference, why even bare learning types ? Why even bare learning typescript ? Correct question and on point ! But do you know  when you write code on Friday with the strategy you made and when you come again on Monday  , writing the code with the exact same strategy as Friday is not possible and  you can make mistakes . You know , time are bad sometimes and you can't rem...
Read more

What is Single Page Application Routing ?

Image
  Single Page Application Routing? Earlier , we used to serve different web pages for the URL whenever the user redirects to the different path and whole application reloads where the sending http request to backend makes the application slower . So , in react there is a package name React Router which makes the multi page application feel to the single page application and the navigation concept in react seems feasible . Single Page Application (SPA) where the whole application load at once and whenever user visits some path, it will fetch the data from the server for the particular component and make that page visible to the user which feels like multi page routing. React Router package manager installed by npm  , and very important concept in react for the navigation  without the react router we cannot perform navigation in the single page application . There are three steps to implement the react router and navigate through the different components after installi...
Read more