Back to all blogposts

React component lifecycle: React lifecycle methods & hooks

Mateusz Piguła

Mateusz Piguła

Frontend Developer

Adrian Senecki

Adrian Senecki

Content Creator

Mateusz, Adrian

Multiple authors

By controlling the lifecycle of React components, you can quite easily master React development. The easier it is for you to perform actions at various specific stages of the lifecycle, the more power you have of the behaviour of your application. The traditional to go about are class components, but you can also go for hooks to use the lifecycle with functional components. Let’s take a look at both solutions and find out more about the whole React component lifecycle!

Component lifecycle in React and its methods has traditionally been an essential part of developing applications in React, which in turn is the basis of much of today’s web development. While today the approach is being increasingly superseded by React hooks, it’s worth it to take a closer look at how it works, study the relationship between class components and functions, and gain a deeper understanding of DOM manipulation with React.

Let’s practice the class-based methods and review their relevance in the light of useEffect’s emergence.

What you’ll learn

In this article, I’m going to go over:

  • the traditional way of accessing React lifecycle events using class components – the theory,
  • using lifecycle events in functional components by means of the React hooks – the theory,
  • the three phases of the React component instance lifecycle, namely: mounting, updating, and unmounting – in practice,
  • using the hooks to access the React component lifecycle events – in practice,
  • a brief comparison of both solutions (is there a place for both in modern React development?).

Let’s dive right in!

React lifecycle method explained

Ever since React came to be, back in 2013, React developers used class components to take full use of the React library (extending from React.Component) in order to manipulate DOM in a React-based app development. How does the React component class approach work?

So, let’s take a look at how it’s been done traditionally. To do that, we’re going to take a closer look at React components.

As you probably know, each React component instance has a lifecycle. The component’s lifecycle consists of three phases:

  • Mounting lifecycle methods, that is inserting elements into the DOM.
  • Updating, which involves methods for updating components in the DOM.
  • Unmounting, that is removing a component from the DOM.

Each phase has its own methods, which make it easier to perform typical operations on the components. With class-based components, React developers directly extend from the React.Component in order to access the methods.

There is no need to address all of the React component lifecycle methods here. The best source of information on currently supported methods for class components is the official React documentation. From there, you will find more about cases such as re-rendering child components due to parent component re-rendering, the constructor method and more.

For now, let’s take a closer look at just a couple examples of lifecycle methods. However, before we do, let’s quickly address the topic that is likely on your mind right now.

Class components vs functional components

As you probably know, an alternative way of taking advantage of lifecycle methods is to use hooks.

With the release of React 16.8 back in March 2019, it is now possible to create functional components that are not stateless and can use lifecycle methods. 

It’s all thanks to the useState and useEffect hooks – special functions that hook into React features that allow to set the initial state and use lifecycle events in functional components. Currently, it is possible to emulate the performance of almost any supported lifecycle method by skilfully applying these two hooks in your pure JavaScript functions.

Are hook-enhanced functional components superior to class based ones? Before we get to that, let’s go over the lifecycle phases using the traditional approach.

Be it with lifecycle methods or hooks, React continues to be the most popular frontend framework.

76,2 percent of all respondents of the State of Frontend 2022 report admitted to using it over the past year. Check out the whole report and learn more about React trends.

Mounting in the React component lifecycle

As we mentioned, during the mounting phase of the lifecycle, the class component is inserted into the DOM. A good example would be componentDidMount() – a lifecycle method that runs after the component is mounted and rendered to the DOM. It is great when you want to do an interval function or an asynchronous request. Example:

Updating in the React component lifecycle

The componentDidUpdate() render method is called right after the updating happens. This one is called always except for the initial render. That’s a good place to interact with a non-reactive environment. It’s a good idea to make http requests here. 

You can call setState() in this method to enqueues changes to the component’s state. but it is very important to wrap that in some condition to avoid an infinite loop (doesn’t matter if state has the same values or not). If there is no condition, the process goes as follows:

  1. You call setState() in the componentDidUpdate() method.
  2. The component is updated.
  3. componentDidUpdate() is invoked.
  4. setState() is called again …

Unmounting in the React component lifecycle

componentWillUnmount() is invoked just before the component is removed from the DOM. You should use that to remove event listeners, clear intervals and cancel requests. In other words: all the needed cleanup.

You shouldn’t use setState in that method because the component won’t be rerendered anymore.

React component lifecycle with hooks

You can take advantage of the useEffect hook to achieve the same results as with the componentDidMount, componentDidUpdate and componentWillUnmount methods. useEffect accepts two parameters. The first one is a callback which runs after render, much like in componentDidMount. The second parameter is the effect dependency array. If you want to run it on mount and unmount only, pass an empty array [].

To clean up, return the callback in useEffect:

If you want it to behave like componentDidUpdate, put some dependencies into the array or don’t pass the second argument at all.

You can also use useState instead of this.state in class components. Instead of:

You can do that:

As you can, it is possible to use hooks to achieve similar or the same end results.

Do you want more expert and timely React content

Class components vs hooks (is there a clear victor?)

As you can see, both class components and hooks have their pros and cons. Does it mean that the choice is mostly a matter of personal preference? For the most part, that’s the case. But there are some things worth noting:

  • If you are more used to functional programming, you will definitely enjoy using hooks.
  • Developers can use functional components without having to convert them into class components.
  • Despite the fact that hooks are really popular nowadays, there is nothing wrong with using class components. Everything that you can do with hooks can also be done with class components.
  • There are also other related topics worth exploring to make your choice even more informed, including network requests, choosing the only required method, child component issues and other React elements.
  • Class components aren’t deprecated and are not going to be anytime soon so use them if that style suits you more.

At the end of the day, it is all about different ways of organizing code and choosing something that is more intuitive for you and your team!

Are you searching for React developers familiar with both lifecycle methods and hooks?

At The Software House, our developers prioritize scalability and always pick the optimal solution for the job. Find out for yourself by consulting your next project with us.

For you?
Acceleration Sprints™

You CAN have time for refinement. Run a 1-2 week sprint to improve product metrics soon


The Software House is promoting EU projects and driving innovation with the support of EU funds

What would you like to do?

    Your personal data will be processed in order to handle your question, and their administrator will be The Software House sp. z o.o. with its registered office in Gliwice. Other information regarding the processing of personal data, including information on your rights, can be found in our Privacy Policy.

    This site is protected by reCAPTCHA and the Google
    Privacy Policy and Terms of Service apply.

    We regard the TSH team as co-founders in our business. The entire team from The Software House has invested an incredible amount of time to truly understand our business, our users and their needs.

    Eyass Shakrah

    Co-Founder of Pet Media Group


    Thank you for your inquiry!

    We'll be back to you shortly to discuss your needs in more detail.