Understanding useEffect

When I was learning react, one of the hook which really confused me is useEffect. During that time, there was so many questions in my mind regarding this hook, like-

Why do we need this hook? When to use this hook and many more. So today I will try to answer these questions.

But before understanding useEffect, we need to understand two important concepts — pure function and side effects.

So, lets understand pure function first. By definition, functions which are deterministic and have no side effects are called pure. Deterministic here simply mean that if you give same input to that function, it will always produce same output. For example

If you run this function with input 2 and 3,it will always return 5. It does not matter how many times you run this function, it always gives you the same output. And this is the first property of pure function.

Now come to its second property, which says it should not have any side effects. By this, we only want to say that the given function should not manipulate or update anything out of its scope. Look at this function

Here, this function is updating the num, which is not in its scope. num is a global variable and not a local variable for this function, so changing or updating the value of num make this function impure. In simple words, we can say that any effect caused outside of a function are side effect of that function. And if a function update anything outside of itself, then we say that function a impure function.

And if you understood side effects, I can now answer one very important question and that is- why do we need useEffect. And the answer is, we need useEffect to handle side effects.

In react world, examples of side effects are — data fetching, DOM manipulation, timers and intervals, event listeners etc. So whenever we are fetching some data using an api, or we were manipulating the DOM, we are going to use this hook.

Now we will learn how to use useEffect in these cases one by one.

During API Calls

first we see the basic syntax of useEffect hook

for a moment, forget about this dependency.

let say we want to make a api call to get some data

what we were doing here is, we are calling an api directly inside our component. Problem in this code is —

So, we are facing 2 major problems here while making a api call directly. And here comes our savior — useEffect

What is special about useEffect is,it only runs after react render or re-render the component. So if we put our api call code inside useEffect, we are going to make our call after our component got rendered. Lets put our code inside it.

So we can say that useEffect has solved our first problem that it will call to an api after our component will be rendered.

Now, what about our second problem? How to solve the issue of rendering our piece of code only once.

To solve this problem, we have to understand the second argument which is optional to useEffect hook and that is — dependency. It is actually an array of values. So we can say that first argument of useEffect is a function, and second is a array.

Now the question is what type of values does this array contain??

To answer this question, we have to see what is happening now. Our useEffect code in this case where we have not provided any second argument is executed every time our component is rendered.

Now if we provide second argument here, which is an array, and let say we put a variable named data in it. Now our useEffect will execute only first time of component rendering and after that it will be rendered only and only when the value of data gets changed.

Here we have provided a variable named count to our array(in react world, variable inside this array are called dependencies). So this code will get executed

Here our code inside useEffect will get executed first when our component will get rendered and then only when values of count or text get changed.

I hope till now you have understood the use of dependency array in useEffect hook. But what will happen if we provide an empty array to useEffect. If we do that, code inside useEffect will get executed only after first rendering of our component.

And since in our first example where we are fetching some data, we only want to run it only once and that is when our component get rendered first, we can provide an empty array to our useEffect hook like that

This is one of the case where we should use useEffect, there are more cases where you should use useEffect like

Lets say we want to change the title of our webapp

So, this will change the title of our document every time we click on increment button. We should use useEffect when we are manipulating DOM using document or window object. Now a question should come in your mind that why we need useEffect here.

Let say we are writing this —

You will get an error here. You will ask why?? It is because document and window objects are available to us only when rendering part is over, so you should put that code inside useEffect so that after rendering when document object is available for us, only then we will change the title.

2. When using timer and interval

whenever we are using setInterval or setTimeout, we should use it inside useEffect hook like this

Here count will get incresed after every minute.But that code is not completely correct. You are not going to get any error in this code but we can improve this code. But we will do that in second part where I will introduce one more concept of useEffect hook which is cleanup function. Till that be happy and take care of yourself and your family and your people.

Related posts:

The latest version update is expected to be completed in June, and the Osasion Wallet update is a continuous event, and the follow-up will also continue to be updated from time to time. For the…

In a move that has got tongues wagging and eyebrows to rise, a group of German doctors have chosen to strip down. Now don’t get the good doctors wrong. They disrobed for a worthy cause and not to…

What if you showed the world your unapologetic, unabashed, authentic self? Are you willing to drop the façade based on outside opinions? We often do things to please othe people. We do or say things…