What is the useEffect in React?

You know that person who’s always there when you need help, but you never fully understand who he or she is? Yes, I am talking about the most used but rarely understood hook, “useEffect”.

The accepted definition of this hook is that it “allows you to perform effects inside a functional component”.

Confused?

Yes, I was too. Like me, you might be wondering what they mean by ‘perform effects’. In functional programming, a side effect is when a function relies on or modifies something outside its parameters to do something. In layman’s terms, it’s an ‘impure’ function.

You can’t really predict the outcome of their operations, and although it is not entirely wrong to get an outcome you did not predict in software, there should be a limit to how much you can’t predict. We make software to do A, B, and C, not A, B, and whatever it feels like doing, especially when the software itself does not know what it feels like doing.

To avoid going too deep down the rabbit hole of functional programming, let’s pause for a minute and get back on topic. React is a library that allows you to render the current ‘state’ of a program in a browser, and we display that state by using an HTML-ish syntax called JSX.

Most often this state is dynamic, otherwise why even use react for your app instead of pure HTML? But remember you are using a functional component that returns JSX, so with that in mind you can tell that the data before return will never change. This defeats the purpose of using react, and so most people opt for a state management hook such as useState.

But useState is also not perfect, simply because it re-renders your component to update the app state with the new data. Imagine a scenario where you are fetching data from the API and storing that data inside the useState hook. Fetching data takes a while, and in this case, after you’ve fetched your data, useState hook will re-render the component to update the UI. But that means fetch function will run again, which will set the state again, and ∞ …

You get the point.

This is where our good friend useEffect comes in saying “hey guys, I see there’s a side ‘effect’ needing to get that data over there. How about that’s all we tell react that only, and let us fetch the data only when the component first mounts.” In other words:

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

And boom, no more infinite re-renders.

But a word of caution: always clean up your side effects. Don’t go doing stuff like:

useEffect(() => { setTimeout(() => {doSomething()}, 2000)},[])

…and then call it a day, rather:

useEffect(() => {const timeOut = setTimeout(() => {doSomething()}, 200); return () => clearTimeout(timeOut)},[])

To summarise, side effects can be a headache when using a functional component in a library like react that requires you to re-render to update the app state. As demonstrated above, useEffect has the power to run this effect only when certain conditions are met.