React Hooks : useEffect
Hi everyone! I will continue the series with another frequently used react hook useEffect. If you haven’t seen my article about the useState hook, you can read it here. I would recommend you to read, as there will be state hook in the examples I will give you today.
If you remember class-based components; probably you’re familiar with componentDidMount, componentDidUpdate and componentWillUnmount lifecyle methods. We can say that useEffect hook, can provide the same functionality as the three lifecycle methods mentioned above.
To summarize useEffect briefly, while running the application, a method we use to call for side effects on which the application is dependent. These side effects can change according to our needs. Getting data, manually modifying the DOM, various events waiting for getting from the window object etc.
So, how to use useEffect? We’ll create a test component at first. Let’s dive in!
useEffect takes 2 parameters. The first parameter is a callback function,
the codes that run are included in this function. If we give an empty array as I used in the first useEffect, the component will run when it is loaded first. If I leave the 2nd parameter empty like second useEffect, the component will work on every render. Let’s see!
Let’s change the example a little more by using the useState I explained in my last article.
As you can see, this time the test component only appears when we click the show button. So what should we do if we want it to be destroyed when we click the hide button? Let’s look at this now!
I returned a function at the end of my first useEffect, it will work when the component is unmounted.
Now that we’ve caught the destroy side effect, we’ve seen 3 lifescyles with the test component. Now let’s create a counter inside test component to see that test component is rendered.
Each time we click the Arttır(Increase) button, the value of count will increase by one.
As you can see, each time we click the increase(arttır) button, the component is rendered. Let’s see what happens if we give a dependency to the second parameter.
Our aim here, listening to count state. So every time count changes, we want to know it and get the new count value.
Thus, every time we click on the arttır button, we understand that the component is rendered. Let’s change the example a bit for better realizing.
I create two states that one of them is postId, and other one is post instead of count state. If we’ve postId, it’ll send fetch request. Also, if we’ve post, expect to see the details of the post.
When we click the show button, it sent request and gave us the post that id 1. As we click the continue button, it’ll show us the posts in order. Well, why we sent a request inside the useEffect? Due to useEffect, we get the data of that id and update our state every time the id changes, without making a request again and again. Generally we need to send a request when the page first loads, now let’s see why!
This means that the component is rendered 4 times. So this place works every time it renders. However, it not preferred as it is a cost and can causes to errors.
If we get it here, works once when the component’s first load. It doesn’t affect it unless we give it a dependency afterwards. We’ll give one last example and finish the useEffect hook!
Here I create an interval that starts running when I click the show button. However, even though I click the hide button, we can see the something is still working in the background. Let’s fix this issue!
If we assign setInterval to a variable and then clear it with clearInterval our issue will be solved.
As you can see, the interval is cleared when I click the hide button. So, we’ve seen in this example that the component is destroyed.
Take care, see you in my next hook article!
