How to use useEffect in React?

Introduction
Earlier , we talk about what are useEffect hooks and why we should use them in our application, to handle side effects like handling http requests , setting timers and intervals and many more . Why useEffect has place so much importance in react?  you must know the answer to this question , only then using useEffect will be fun to use in react application and writing code with the understanding is much more important than just cramping the syntax of the concept.


There are three case scenarios in which the useEffect hook can be used and provides the much code flexibility

1. UseEffect runs only once

This is the case scenario in which we want to run the useEffect hook only when the page loads initially and then it never changes. The side effect function in the useEffect hook will only run in initial render and will not re-render useEffect hook , if any state changes or component re-evaluated. Let's look at the example of the useEffect hook below,


So, you see when you run the useEffect only once , you will specify nothing in the dependency list and have to placed the empty array in the second parameter of the hook , first parameter is the side effect function which will only run initially  whenever the page loads.

In this example , the set timeout function console log 1 after one second only once when the page loads. This is very simple example of useEffect hook which will runs initially .

2. UseEffect hook runs on every render

UseEffect hook runs on every render when you don't specify the second parameter which is the dependency list and will only contain the side effect function which in result be execute whenever some state in you code updates and re-executed the side effect function every time. Let's look at the example of the useEffect hook runs on every render below,


This is the pretty easy example of useEffect hook , where in the component with any state update useEffect hook will console log 1 after a second and log the value 1 when the component re-executed.

3. UseEffect hook runs conditionally

If you want to run the useEffect hook only when some of the your state changes in your component , you have to specify the dependency list in the second parameter , the way we did when hook renders only once but not as empty array , it will contain the current value of the state or the prop , so it can compare the values , and on the basis of the comparison hook function executes. Let's look at the example below,


In this example , whenever the onClick event triggers , it updates the count values which re-renders the component and also runs the side effect because the count value specify in the dependency list . This is how you use useEffect hook conditionally and can specify the state or prop value in the dependency list according to your use case in the project.

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