How to use useEffect hook in React?

While learning about the React hooks, you will probably come across the useEffect hook. Oftentimes, it is misunderstood by many developers and it is crucial to understand how useEffect works and its usage.

In this article, I will try to break down how useEffect works and how it is going to run in different scenarios, and all the necessary details needed to fully understand useEffect.

Before we jump into what useEffect is, let us list out the primary tasks of React.

Working with DOM/browser to render UI.

Manage the states from one render to the next render.

Update UI whenever the state change occurs.

Then what are the tasks that React cannot handle on its own?

(Out)Side effects: It means is that whatever lies outside the reach of React.

A few examples could be,

localStorage: We can access localStorage, but react has no real way of interfacing with it.

API/ database interaction: We can write code to interact with API but React is not in charge of that code.

Syncing two different internal states: React can manage each of the states individually but not the syncing of those two.

Now that we know what side effects are, let us understand the useEffect hook.

The useEffect hook helps us to perform side effects in function components. You can think of it as a tool that the React team has provided us developers to interact outside of the React ecosystem. For example, to sync between React state with outside systems like localStorage or API.

The useEffect() takes two parameters.

A call-back function that contains the side-effect code.

Dependency array, that determines when the effect should run.

or we can also use this syntax,

1. If the dependency array is not mentioned, then the useEffect() will run after every render.

2. If the dependency array is empty, then the useEffect will run only on the first render.

3. The number of times the useEffect is going to run depends on the change in state. Here, the useEffect() is going to execute every time the value of the count variable changes.

Suppose the initial value of count is 0; the dependency array is [0]. When the count increments by one, the dependency array becomes [1].

Now, the useEffect() will check if the previous value i.e., [0] matches the current value [1]. Since there is no match, the useEffect will run. If in case the dependency array is hard-coded with value [0] instead of [count], then when the count variable is increased to 1, it has no effect on the dependency array and hence the useEffect will not run.

That is the reason it is called a dependency array since the running of useEffect depends on the previous value of the variable in the dependency array.

It saves applications from unwanted behaviors like memory leaks and unwanted behaviors by cleaning up effects. We can return a function inside the useEffect() and this is where the clean-up happens.

Suppose there is a web-socket call that keeps polling. We can close the connection using the cleanup function.

That's all about the useEffect hook. Thanks for reading the article. I hope this article has helped you understand the concepts of useEffect hook. If you found this helpful, please give a like and share this article.

Thanks for reading! Have a great day :)