useEffect hook in React
Tags: react, javascript, hooks, webdev
Published: 2022-04-19 15:02:39

Welcome back!

This is the second blog in the **React Hook** series, where we're learning about different hooks used in React, and our today's hook is the `useEffect` hook. Before we get started, I'd recommend reading the last blog of this series [useState Hook](https://vanshsharma.hashnode.dev/react-usestate-hook). Though this hook is completely independent of the `useState` hook, and you can read and learn from it without any prior knowledge of hooks, it would beneficial to have some basic understanding of the hooks.

###  What is the use of useEffect hook in React?
The `useEffect` hook is used in our components to perform side effects. Side effects are the task that happens outside the normal component evaluation. Data fetching, web API, and manually changing the DOM are some examples of side effects. 

### How to use the useEffect hook

- Import useEffect hook

It can be imported by destructuring from the React library using the following code:

```
import {useEffect} from "react"
```

- Syntax of useEffect hook

```
useEffect (  <function> , [dependency] )

```
There are two arguments:

(i) The first is a function that will be invoked on every render until the `dependence` is provided.

(ii) The second argument is the  `dependence` which will enable `useEffect` to call our specified function if it changes.

- Why use dependency

As previously stated, the `useEffect` hook will call our function on every render, resulting in an infinite loop and crashing the browser. However, there are ways to avoid it by providing dependency.

 1) Providing an empty array [] as a dependency
```
 useEffect( () =>{

// it will run only on the first render

},[]}

```

2) Providing the props or state as the dependencies

```
useEffect( () =>{

// it will run on the first render
// it will also run every time the given dependencies changes

},[  props , state  ]}

```
Check out the file `NonEmptyDependency.js`, and `EmptyDependency.js`. and console of the following codesandbox to better understand the examples.

{% embed https://codesandbox.io/embed/useeffect-hook-with-empty-dependency-3pfwjs?fontsize=14&hidenavigation=1&theme=dark %}


### Cleanup function in useEffect

Consider the following scenario: we obtain a fetch of a specific user via the user's id, but before the fetch is completed, we change our minds and attempt to obtain another user. While the previous retrieve request is still in progress, the prop, or in this example, the id, updates.
To avoid exposing our application to a memory leak, we must then cancel the fetch using the cleanup function.
Every time the `useEffect` is called the cleanup function will also run except on the first render.

Let us clean the Timeout function at the end of the `useEffect` hook in the following codesandbox.



{% embed https://codesandbox.io/embed/useeffect-cleanup-function-12keoy?fontsize=14&hidenavigation=1&theme=dark %}


That's all for this blog.  Continue reading this React hook series to learn more about React hooks. In the next blog, we'll look at the 'useContext' hook, which is used to handle state management in React globally.
Feel free to leave your valuable feedback in the comments below.


To learn more about React, JavaScript, and Web development, follow me on [Twitter](https://twitter.com/Vanshsh2701).

Reference: W3Schools, [Blog](https://blog.logrocket.com/understanding-react-useeffect-cleanup-function/#:~:text=The%20cleanup%20function%20prevents%20memory,some%20unnecessary%20and%20unwanted%20behaviors.)