A Beginner’s Guide to useEffect in React

Hooks are a new addition in React 16.8. They let us use “state” and other React features without writing a class. useEffect is one of the side effects which let us perform the side effects in functional components. The useEffect hook gives us a better way to handle the life cycle method inside the functional components.It lets you handle componentDidMount , componentDidUpdate , and componentWillUnmount within a function. Now let’s understand the implementation of Use Effect with a simple React Application.

Photo by Radek Grzybowski on Unsplash

Now let’s see the code of React Application

I have used useState Hook to declare a state in this functional component. I have also declared three buttons specifying three different content types, and onClick event of those three buttons , I am calling the setContentType function to change the state of “content” . This will update the DOM which will cause the component to re-render.

So I clicked those buttons and you’ll see that it is printing out the content type in the console. It will display the content-type every single time when our application renders.

Now consider a scenario when I wish to call an API to fetch some data whenever my content type/”state” changes or whenever this functional component mounts or re-renders. This is where we want that side effect to happen when our state changes. For this we can apply some conditional checks and check those conditions every single time when the component re-renders, but this is not the efficient way when you are building a large scale application.

Now useEffect can save us from all that trouble.So the basic syntax of useEffect Hook is

useEffect(() => {
effect
return () => {cleanup}
}, [input])

Note -> You need to import useEffect like this

import React , {useState , useEffect} from 'react'

So we pass it an arrow function that can also be stated as an effect function. And this arrow function will only run when the input parameter changes which is passed as an array. We can also define a cleanup function , which can be used whenever our component unmounts. Consider a chat-bot or customer-review application, where you would like to clear the user chats after the conversation is over to avoid information leak. In class based components it can be easily done using the ComponentWillUnmount life cycle method. But in the case of a functional component, we need to run the cleanup function to achieve this task.

So Now I am going to describe the basic form of useEffect Hook which we are going to use in our code. So whenever the content state will change , it will re-render the application and the useEffect function will run.

console.log("content type =>" , content)
useEffect(() => {
console.log("content type Use Effect =>", content)
}, [content])

If you’ll pass an empty array in input , it will only run whenever the component mounts

useEffect(() => {
console.log("on Mount")
}, [])

So you’ll see that “on Mount” was printed for only one time. But the content type will be displayed whenever the button is clicked i/e when the component re-renders.

So Now we will use JSONPlaceholder api to fetch data of posts, users and comments. It is a fake online rest api.

And the data which we accessed through api call is being printed out in console, Here it is

Final Code Snippet

So in this tutorial, I tried to explain to you the working and benefits of using the useEffect Hook, Hope you liked this article and it helps you in building your future React applications, Thank you.