useEffect hook

The useEffect is the second most important hook after useState.

The syntax of the useEffect hook is as follows:

useEffect(()=> { },[])

Hence it consists of two parameters 1)The first parameter is the callback function 2)The second parameter is the dependency array

When we use the useEffect hook without the second parameter then the callback function runs every time the component changes

For example:

useEffect(()=> { //do some task here });

When the useEffect is run with an empty array in that case the function of it only runs the first time

useEffect(()=> { },[])

Now lets know about the dependency array

The values passed inside the dependency array basically determines how many times the callback function runs

Like suppose we have two state variables dhruv and dhruv2. Then if in the array we pass [dhruv] this means that every time the dhruv state variable changes then only the useEffect hook's function is executed. If dhruv2 is changed then the useEffect doesn't run.

One thing to remeber is that we can have multiple useEffects for different variables as well

In dependency array the values are checked or compared using the === comparator. As two objects are never equal to each other thus if we pass an object variable inside the [] then the useEffect will run every time because each render of the component creates a different object and thus as the object is not equal to the previous object thus it runs the function

CleanUp function

The output of the above code will be as follows:

We can also have async functions inside the useEffect hooks as follows: