ReactJS | useEffect Hook

26 Jan, 2022
The motivation behind the introduction of useEffect Hook is to eliminate the side-effects of using class-based components. For example, tasks like updating the DOM, fetching data from API end-points, setting up subscriptions or timers, etc can be lead to unwarranted side-effects. Since the render method is to quick to produce a side-effect one needs to use life cycle methods to observe the side effects. For example, consider updating the document title for a simple counter component to the current value. On the initial render, we set the current clicked value to 0 clicks. So, this section is coded into the componentDidMount() method which is executed only once in the component life cycle. Then we create a button to increment the count state value by one on every click. As the count value state changes, we also need to update the document title again and for that, we need to write the same piece of code in componentDidUpdate(). The componentDidupdate() method is perfect for updating the counter value at any time the state changes but the repetition of code is one of the side-effects.
Javascript
componentDidMount(){    document.title = `you clicked ${this.state.count} times`;} componentDidUpdate(){    document.title = `you clicked ${this.state.count} times`;}
Let us consider another side-effect by setting up a timer. On the componentDidMount() method, we set a timer to log a string “hello” every 5 seconds. We can clear this timer when the component is being removed from the DOM. And we do that in componentWillUnmount() life-cycle method. So the code for the timer looks like below:
Javascript
componentDidMount(){    this.interval = setInterval(this.tick, 1000)} componentWillUnmount(){    clearInterval(this.interval)}
Both the counter and timer when merged to form a single component looks like below:
Chapters
descriptions off, selected
captions settings, opens captions settings dialog
captions off, selected
English
default, selected
This is a modal window.
Beginning of dialog window. Escape will cancel and close the window.
End of dialog window.
Javascript
componentDidMount(){    document.title = `you clicked ${this.state.count} times`;    this.interval = setInterval(this.tick, 1000) } componentDidUpdate(){    document.title = `you clicked ${this.state.count} times`;    clearInterval(this.interval)}
As you observe the code above, we tend to notice that to update the document title we write the same code twice, once in componentDidmount() and once in componentDidUpdate(). The second thing to observe is how the code is split into the component. The code related to the timer, setInterval, and clearInterval which are related are put into different code blocks (i.e. different life-cycle methods). The code to update the DOM and code for setting up the timer which is completely unrelated are put in the same life-cycle method (i.e. in componentDidMount()). It will be much better if there is an option to not repeat code at the same time group together related codes in the same block. This is where the useEffect Hook comes in the picture. The Effect Hook lets you perform side effects in functional components. It is a close replacement for componentDidMount(), componentDidUpdate() and componentWillUnmount() method.
useEffect after render: We know that, the useEffect() is used for causing side effects in functional components and it is also capable for handling componentDidMount(), componentDidUpdate() and componentWillUnmount() life-cycle methods of class based components into functional component. Let’s look at an example on how to use the useEffect hook as a feature that can mimic the above mentioned life-cycle methods but in functional components. 
For better understanding lets look how the code looks like in a class component below and we are going to name it “ClassComponentOne”
Filename: src/components/ClassCounterOne.js  
Javascript
import React, { Component } from 'react' class ClassCounterOne extends Component {    constructor(props){        super(props)        this.state = {            count: 0        }    } componentDidMount(){    document.title = `Clicked ${this.state.count} times`} componentDidUpdate(prevProps, prevState){    document.title = `Clicked ${this.state.count} times`} render() {    return (        <div>            <button onClick = {() => this.setState(                  { count: this.state.count + 1})}>                Click {this.state.count} times            </button>        </div>    )} export default ClassCounterOne
Now, we include the component in App.js. The code will look like below for App.js
Filename: src/App.js 
Javascript
import React from 'react'import './App.css'import ClassCounterOne from './components/classCounterOne' function App(){    return(        <div className='App'>        <ClassCounterOne />        </div>    )} export default App
Now if we look at the browser we can observe that initially the document title is “Clicked 0 times”. 
And if we click on the button the count value increments by 1 on each click and updates the title as well. 
Now let’s try to replace the functionality with a functional component. For the same purpose create a new file and name it (say, HookCounterOne.js) 
The functional component will look like the code below:
Filename: src/components/HookCounterOne.js 
Javascript
import React, { useState, useEffect } from 'react' function HookCounterOne() {    const [count, setCount] = useState(0)     useEffect(() => {        document.title = `You clicked ${count} times`     return (        <div>            <button onClick = {() => setCount(count + 1)}>                  Click {count} times </button>        </div>    )}export default HookCounterOne
Now we need to import the above component in our App.js file. After the inclusion of the HookCounterOne component, the code looks like below:
Filename: src/App.js 
Javascript
import React from 'react'import './App.css'import ClassCounterOne from './components/classCounterOne' function App(){    return(        <div className='App'>        <HooKCounterOne />        </div>    )} export default App
Now if we look into the browser we can see the initial state as below. Initially, the document title reads “You clicked 0 times”. 
And when you click on the button, the count value increments, and the document title is updated. As we can observe the behavior is as expected.  
When we specify useEffect we are basically requesting react to execute the function that we pass in the useEffect function as an argument, everytime the component renders. The second thing to make note of is that useeffect is used inside the component as by doing this we can easily access the components state and props without having to write any additional code. 
adnanirshad158
girisangam823
react-js
Web Technologies
Write From Home
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?
Convert integer to string in Python
Convert string to integer in Python
How to set input type date in dd-mm-yyyy format using HTML ?
Python infinity
Factory method design pattern in Java