React useEffect hook

UseEffect is hook of reactjs. useEffect perform side effect in react functional components.

If you have read the life cycle methods of react, useEffect is a combination of three life cycle methods named componentDidMount, componentDidUpdate, and componentWillUnmount.

Below is the basic structure of useEffect.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import React, { useState, useEffect } from 'react';

  function UseEffectExample() {
    const [count, setCount] = useState(0);
  
    // Similar to componentDidMount and componentDidUpdate:
    useEffect(() => {
      // Update the document title using the browser API
      document.title = 'You clicked'+count+ 'times';
    });
  
    return (
      <div>
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>
          Click me
        </button>
      </div>
    );
  }

How useEffect dependency array works?

If you want that useeffect to work as componentDidMount then you have to pass empty brackets as given in the below example.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import React, { useState, useEffect } from 'react';

  function UseEffectExample() {
    const [count, setCount] = useState(0);
  
    // Similar to componentDidMount
    useEffect(() => {
      // Update the document title using the browser API
      document.title = 'You clicked'+count+ 'times';
    },[]);
  
    return (
      <div>
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>
          Click me
        </button>
      </div>
    );
  }

If you want that useEffect to execute after the update of a specific property of state then put that property in the brackets as given in the below example.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import React, { useState, useEffect } from 'react';

  function UseEffectExample() {
    const [count, setCount] = useState(0);
  
    // Similar to componentDidMount
    useEffect(() => {
      // Update the document title using the browser API
      document.title = 'You clicked'+count+ 'times';
    },[count]);
  
    return (
      <div>
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>
          Click me
        </button>
      </div>
    );
  }

It will execute after the first render then it will execute after each update of the count value.

If you want that useEffect to work as componentWillUnmount then return an arrow function from the useEffect function as given in the below example.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import React, { useState, useEffect } from 'react';

  function UseEffectExample() {
    const [count, setCount] = useState(0);
  
    // Similar to componentDidMount
    useEffect(() => {
      // Update the document title using the browser API
      document.title = 'You clicked'+count+ 'times';
      return ()=>{
        // write your clean up function here
      }
    },[]);
  
    return (
      <div>
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>
          Click me
        </button>
      </div>
    );
  }

You can get all the above functionality from single useEfect hook. This is how useeffect cleanup function works.