Lifecycle methods with the useEffect Hook
Tags: react
Published: 2020-05-04 16:31:38

---
title: Lifecycle methods with the useEffect Hook
published: true
date: 2020-04-08 16:00:02 UTC
tags: react
canonical_url: https://blog.logrocket.com/lifecycle-methods-with-the-useeffect-hook/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/8x6v7xiaiawo5kkgt9uy.png
---
**Written by [Leonardo Maldonado](https://blog.logrocket.com/author/leonardomaldonado/)**✏️

React brought us a few different concepts, for example, the virtual DOM. It also introduced us to different libraries and new ways of solving problems that we might face in development. With this, we’re always improving our code to create more maintainable and well-written applications.

But some of the most important features of React (that have been built into the React core itself) are the [React component’s lifecycle and the lifecycle methods](https://reactjs.org/docs/react-component.html).

## Component’s lifecycle and lifecycle methods

One of the most important features that React introduced to us was the virtual DOM, the way we can easily replace a specific element in the DOM by using a virtual DOM to compare with the actual one is very useful. Updating our components is an essential part of our applications. Showing our updated content to our user is essential, we should always know what will be shown to the user after an interaction.

In React, we have something called the React component’s lifecycle. Each React component has its own stages, these stages are known as the React component’s lifecycle.

We have a few different phases in a React component’s lifecycle, let’s take a look.

[![LogRocket Free Trial Banner](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2017/03/f760c-1gpjapknnuyhu8esa3z0jga.png?resize=1200%2C280&ssl=1)](https://logrocket.com/signup/)

## Mounting

This is the first lifecycle of a React component, this is the stage where the component is created and inserted into the DOM. In this lifecycle stage, we have the `componentDidMount` lifecycle method. The `componentDidMount` lifecycle method happens when your component is mounted:

```jsx
componentDidMount() {
  console.log("The component has mounted successfully!");
  this.setState({
    loaded: true
  })
}
```

The `componentDidMount` allows you to use the `setState`, so we can easily set and modify our state in this lifecycle method. This lifecycle method is used to perform API calls, make calls to remote endpoints, and retrieve data.

In this stage, the `render` method is what we use to render the component into the DOM. The `render` method is the only one that’s required.

So, the component’s lifecycle, known as mounting, is responsible for creating our component and inserting it into the DOM.

## Updating

This lifecycle stage happens after the component is mounted and rendered into the DOM. A React component is updated when we have an update in our props or state.

We have some lifecycle methods that we can use in this specific lifecycle, such as the `shouldComponentUpdate` and the `componentDidUpdate`.

The `shouldComponentUpdate` lifecycle method is very simple. We should just return a boolean to determine if the component React should update the component. The default value for this method is `true`.

```jsx
shouldComponentUpdate() {
  return true;
}
```

The `componentDidUpdate` lifecycle method is invoked after the update happens in the component. This lifecycle method is used to compare if a specific prop or state has changed.

```jsx
componentDidUpdate(prevProps) {
  if (this.props.name !== prevProps.name) {
    console.log("Name has changed!");
  }
}
```

## Unmouting

This lifecycle is responsible to do the cleanup in our DOM, especially when we want to remove a component from our DOM, in React this is called unmounting.

We have just one lifecycle method for that lifecycle stage called `componentWillUnmount`. This lifecycle method will be invoked when the component is about to be removed from the DOM:

```jsx
componentWillUnmount() {
  console.log("Component unmounted!");
}
```

## Deprecated lifecycle methods

A few lifecycle methods were deprecated in the [React version 16.3.0](https://reactjs.org/blog/2018/03/29/react-v-16-3.html), the deprecated lifecycle methods were:

```jsx
componentWillMount
componentWillReceiveProps
componentWillUpdate
```

One of the main reasons that these lifecycle methods were deprecated is because when React implemented async rendering, the incorrect use of one of these lifecycle methods could lead to big errors, could encourage unsafe coding practices, and in some situations, result in memory leaks.

If you’re still using one of these lifecycle methods in your actual application and you’re planning to upgrade to the newest React version, you should know that on the [React 17.0](https://reactjs.org/blog/2019/08/08/react-v16.9.0.html) version they were _removed completely_.

You might have heard and used one of all these lifecycle methods in your applications before, and they’re really helpful and useful for a lot of situations that we face on a daily basis. But you might have noticed something, all these lifecycle methods are used in class components. Check out [this post](https://blog.logrocket.com/the-new-react-lifecycle-methods-in-plain-approachable-language-61a2105859f3/) that explains how these lifecycle methods work in class components. Now that we have React Hooks, we can deal and manage our state data in functional components, so how we can use lifecycle methods in functional components?

To manage our side-effects in functional components, we have the [useEffect Hook](https://reactjs.org/docs/hooks-effect.html), a Hook can help us use lifecycle methods in functional components.

Let’s understand more about the `useEffect` Hook and see how we can apply lifecycle methods in our functional components.

## So what’s changed?

In class components we have lifecycle methods, to perform actions in a specific lifecycle stage of our component. To have something similar to that, and for us to be able to perform side effects in our functional components, the React team created the `useEffect` Hook.

The `useEffect` Hook allows us to perform side effects in our functional components.

This is how the `useEffect` Hook works. First, we need to import it from React:

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

Now, in our component, we call the `useEffect` Hook, and this is how it works:

```jsx
useEffect(() => {
  // Inside this callback function we perform our side effects.
});
```

It receives a callback function as the first parameter, this callback function is going to be our “effect” and be called. The `useEffect` Hook is going to be called after every render of our component, that’s why we have a second argument.

As the second parameter, the `useEffect` Hook receives an array of dependencies. But what does that mean?

Inside this array, we can pass the dependencies that the `useEffect` Hook is going to watch. Bypassing an array of dependencies, the `useEffect` Hook will only run if one of those dependencies changes.

So, imagine that we have a prop called `username`, if we pass this prop as a dependency to the `useEffect` Hook, it will only run if the `username` prop changes:

```jsx
useEffect(() => {
  // Pass an array of dependencies and the useEffect hook will only run if one of the dependencies changes.
}, [name]);
```

If you pass an empty array to the `useEffect` Hook, it will only run once after render. In the [React documentation](https://reactjs.org/docs/hooks-effect.html), the basic explanation of the `useEffect` Hook is this:

> If you’re familiar with React class lifecycle methods, you can think of useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined.

Because of the `useEffect` Hook, it’s very simple to perform side effects. In our case, we’re going to perform the equivalent of some lifecycle methods.

## componentDidMount

This is how we can perform the equivalent of `componentDidMount` using the `useEffect` Hook:

```jsx
 useEffect(() => {
  // Inside this callback function we perform our side effects.
});
```

Just calling the `useEffect` Hook and passing the callback function, we’re performing the equivalent of the `componentDidMount` lifecycle method. Very easy.

## componentDidUpdate

To perform the equivalent of the `componentDidUpdate` using the `useEffect` Hook, we should do this:

```jsx
useEffect(() => {
  // Inside this callback function we perform our side effects.
}, [dependency]);
```

That’s it. It’s almost the same as the previous one, but this time we’re passing our array of dependencies as the second parameter, and inside that array, we should pass the dependency that we want to watch. If you don’t pass any dependency, the `useEffect` Hook will still work as the `componentDidUpdate` lifecycle method.

## componentWillUnmount

To do the cleanup after the component unmounts, we have a simple way to perform the equivalent of the `componentWillUnmount` using the `useEffect` Hook.

The only thing that we need to do is to return a function inside the callback function of the `useEffect` Hook, like this:

```jsx
useEffect(() => {
  window.addEventListener("mousemove", () => {});
  return () => {
    window.removeEventListener("mousemove", () => {})
  }
}, []);
```

That’s it. It’s very simple, we can use the `useEffect` Hook to perform side effects similar to the lifecycle methods that we have in class components, and with clean and straightforward code.

[Dan Abramov](https://twitter.com/dan_abramov) wrote in May 2019 an article called “[A Complete Guide to useEffect](https://overreacted.io/a-complete-guide-to-useeffect/)”. I’d really recommend you read his article after you finish reading this one.

Now that we have React Hooks available, there’s no need to use class components anymore, we can easily migrate all of our class components to functional components today, and if the lifecycle methods were one of the single reasons that you have not migrated yet, now you can safely migrate to functional components and use React Hooks in your application.

## Conclusion

In this article, we learned more about the React component’s lifecycle and how they work. Then, we looked at the lifecycle methods in React, and how we can use the `useEffect` Hook to use lifecycle methods in functional components.

* * * 
## Full visibility into production React apps 

Debugging React applications can be difficult, especially when users experience issues that are difficult to reproduce. If you’re interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, [try LogRocket.](https://www2.logrocket.com/react-performance-monitoring)

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/eq752g8qhbffxt3hp9t4.png)

[LogRocket](https://www2.logrocket.com/react-performance-monitoring) is like a DVR for web apps, recording literally everything that happens on your React app. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app's performance, reporting with metrics like client CPU load, client memory usage, and more.

The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.

Modernize how you debug your React apps — [start monitoring for free.](https://www2.logrocket.com/react-performance-monitoring)
* * *

The post [Lifecycle methods with the useEffect Hook](https://blog.logrocket.com/lifecycle-methods-with-the-useeffect-hook/) appeared first on [LogRocket Blog](https://blog.logrocket.com).