How to UseEffect In React

A quick tutorial on how to useEffect.

Before hooks were invented, class components dominated the landscape for React developers. React’s lifecycle methods were only accessible to class components thus making classes the only option to perform side effects.

useEffect is a hook that allows you to perform side effects from a functional component. It serves the same purpose as componentDidMount, componentDidUpdate, and componentWillUnmount lifecycle methods in React classes, but is unified into a single API.

useEffect takes two params.

Example.

I think the best way to understand a coding concept is to see it in action. So we are going to identify how we can use useEffect to interact with these events:

Go to your chosen directory, and npx create-react-app useeffect. I named this project “useeffect”, but feel free to choose whatever name you would like.

Once you have everything running.

In the developer console, you will notice “mount” has been logged. And every time you refresh you will see “mount” reappear in the console.

Now let's see how useEffect interacts when a state variable is changed.

With the developer console open, interact with the button, and watch how the useEffect responds to the state updates.

Honestly, this was unexpected for me when I started working with React. By not passing a dependency array, I expected useEffect to only be called once when the component mounts.

To confirm this, we are going to add another state variable and then see how useEffect reacts to each state change.

Notice when you switch between clicking on both buttons, the useEffect will always be called.

Since we didn’t provide a dependency array, useEffect will always be called with any state update occurring inside the component.

Let’s say we only want useEffect to update when count updates. Well, we can do that by adding a dependency array as a second parameter.

By only passing count as a dependency to the useEffect hook, we are essentially telling useEffect to only be called again when the count state variable changes.

We are going to see what happens when we pass an empty dependency array.

As you interact with both buttons, you will notice that the developer console doesn’t relog “mount.” It only logged “mount” after the component has been mounted.

But let’s say that we want to separate the logic between how we handle when count updates and when decrement updates.

We can achieve this by either:

I know. I know. We can have multiple useEffect hooks inside a component. It took me a while to figure out that this was feasible.

Lastly, we are going to see how we can add logic before the component will unmount. Similarly to how we would use the lifecycle method componentWillUnmount for class components.

A perfect example of when we would need to implement a process like this is when we subscribe to a listener and want to unsubscribe before the component unmounts.

Ta-da! Now you know how to perform actions before a component will unmount.

Here’s what we learned:

Congrats on getting to the end! Now you have a better grasp on how to useEffect.

Related posts:

Facts on Atomic Bombing on Hiroshima:. “Facts on Atomic Bombing of Hiroshima And Nagasaki” is published by Winknowledge.

Everyone writes for some reason. Here is my story about why do I write? I have shared my views about writing by writing a poem. “I want to spill out my heart but can’t because I am afraid of worldly matters that does…

Augmented Reality has now surpassed the novelty phase for most. From its humble beginnings of sharing silly face masks with close friends to now trying on a prospective pair of prescription glasses…