Last minute guide to React.useEffect()
Tags: javascript, tutorial, webdev, react
Published: 2021-09-02 06:31:39

React.useEffect() is one of the React hooks that manages side-effects in functional React components. You can do so much by writing so little with the help of this hook.

useEffect accepts a callback function (also called the 'effect' function), and it runs after every render (by default).

If you want your effects to run less often, you can provide a second argument – an array of values. Think of them as the dependencies for that effect.

So, let us look at some examples in which I'll be showing how you can control the behavior of useEffect.


## 1. When no dependencies are provided
The callback function provided as the first argument will run after every rendering.

```javascript
import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // Runs after EVERY rendering
  });  
}
```


## 2. When an empty dependencies array([]) is provided
The callback function provided as the first argument will run only once after the initial rendering.

```javascript
import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // Runs ONCE after initial rendering
  }, []);
}
```


## 3. When dependencies array provided has props or state values [prop1, prop2, ..., state1, state2]
The callback function provided as the first argument will run only when any dependency value changes.

```javascript
import { useEffect, useState } from 'react';

function MyComponent({ prop }) {
  const [state, setState] = useState('');
  useEffect(() => {
    // Runs ONCE after initial rendering
    // and after every rendering ONLY IF `prop` or `state` changes
  }, [prop, state]);
}
```


## 4. Effect with Cleanup
If the callback of useEffect returns a function, then useEffect() considers this as an effect cleanup.

```javascript
useEffect(() => {
  // Side-effect...

  return function cleanup() {
    // Side-effect cleanup...
  };
}, dependencies);
```

It's pretty common to clean up an effect after some time. This is possible by returning a function from within the effect function passed to useEffect. Below's an example with addEventListener.
```javascript
() => {
  useEffect(() => {
    const clicked = () => console.log('window clicked')
    window.addEventListener('click', clicked)

    // return a clean-up function
    return () => {
      window.removeEventListener('click', clicked)
    }
  }, [])

  return <div>
    When you click the window you'll 
    find a message logged to the console
  </div>
}
```


## 5. Multiple Effects
Multiple useEffect calls can happen within a functional component as shown below:

```javascript
() => {
  // 🍟
  useEffect(() => {
    const clicked = () => console.log('window clicked')
    window.addEventListener('click', clicked)

    return () => {
      window.removeEventListener('click', clicked)
    }
  }, [])

  // 🍟 another useEffect hook 
  useEffect(() => {
    console.log("another useEffect call");
  })

  return <div>
    Check your console logs
  </div>
}
```


I hope this article helps someone out there.


**If you liked this post, you can find more by:**
* Following me on Twitter: [@forkbikash](https://twitter.com/forkbikash)
* Following me on GitHub: [@forkbikash](https://github.com/forkbikash)
* Following me on this beautiful platform: @forkbikash 


<a href="https://twitter.com/share?url=https://dev.to/forkbikash/last-minute-guide-to-react-useeffect-4n1i">**Tweet this post**</a>
<a href="https://twitter.com/forkbikash?ref_src=twsrc%5Etfw">**Follow me on Twitter @forkbikash**</a>