React Lifecycle Methods – A Deep Dive

Have you had trouble understanding some of the React lifecycle methods and how to implement them without messing up?

Don’t worry you are not alone. When I first started coding my React app, I ran into situations where I had to take a step back and learn the React lifecycle methods before I could proceed.

Before we get started, I want you to know that the latest React versions have determined that some of the older lifecycle methods are unsafe to use and will be deprecated in React 17. In this blog post we will not learn about the soon to be deprecated unsafe lifecycle methods.

What are React lifecycle methods?

You can think of React lifecycle methods as the series of events that happen from the birth of a React component to its death.

Every component in React goes through a lifecycle of events. I like to think of them as going through a cycle of birth, growth, and death.

  • Mounting  Birth of your component
  • Update – Growth of your component
  • Unmount – Death of your component

Now that we understand the series of lifecycle events let’s learn more about how they work.

Common React Lifecycle Methods


The render() method is the most used lifecycle method. You will see it in all React classes. This is because render() is the only required method within a class component in React.

As the name suggests it handles the rendering of your component to the UI. It happens during the mounting and updating of your component.

Below is an example of a simple render() in React.

class Hello extends Component{
      return <div>Hello {}</div>

As you can see in the example above, the render() method returns JSX that is displayed in the UI. A render() can also return a null if there is nothing to render for that component.

A render() method has to be pure with no side-effects.

React requires that your render() is pure. Pure functions are those that do not have any side-effects and will always return the same output when the same inputs are passed. This means that you can not setState() within a render().

You cannot modify the component state within the render().

If you do need to modify state that would have to happen in the other lifecycle methods, therefore keeping render() pure.

Furthermore, keeping your render() simple and clean without state updates makes your app maintainable.


Now your component has been mounted and ready, that’s when the next React lifecycle method componentDidMount() comes in play.

componentDidMount() is called as soon as the component is mounted and ready. This is a good place to initiate API calls, if you need to load data from a remote endpoint.

Unlike the render() method, componentDidMount() allows the use of setState(). Calling the setState() here will update state and cause another rendering but it will happen before the browser updates the UI. This is to ensure that the user will not see any UI updates with the double rendering.

You can modify the component state within the componentDidMount(), but use it with caution.

Caution: It is recommended that you use this pattern with caution since it could lead to performance issues. The best practice is to ensure that your states are assigned in the constructor(). The reason React allows the setState() within this lifecycle method is for special cases like tooltips, modals, and similar concepts when you would need to measure a DOM node before rendering something that depends on its position.


This lifecycle method is invoked as soon as the updating happens. The most common use case for the componentDidUpdate() method is updating the DOM in response to prop or state changes.

You can call setState() in this lifecycle, but keep in mind that you will need to wrap it in a condition to check for state or prop changes from previous state. Incorrect usage of setState() can lead to an infinite loop.

You can modify the component state within the componentDidUpdate(), but use it with caution.

Take a look at the example below that shows a typical usage example of this lifecycle method.

componentDidUpdate(prevProps) {
 //Typical usage, don't forget to compare the props
 if (this.props.userName !== prevProps.userName) {

Notice in the above example that we are comparing the current props to the previous props. This is to check if there has been a change in props from what it currently is. In this case, there won’t be a need to make the API call if the props did not change.


As the name suggests this lifecycle method is called just before the component is unmounted and destroyed. If there are any cleanup actions that you would need to do, this would be the right spot.

You cannot modify the component state in componentWillUnmount lifecycle.

This component will never be re-rendered and because of that we cannot call setState() during this lifecycle method.

componentWillUnmount() {
 window.removeEventListener('resize', this.resizeListener)

Common cleanup activities performed in this method include, clearing timers, cancelling api calls, or clearing any caches in storage.

Uncommon React Lifecycle Methods

We now have a good idea of all the commonly used React lifecycle methods. Besides that, there are other lifecycle methods that React offers which are sparingly used or not used at all.


This lifecycle can be handy sometimes when you don’t want React to render your state or prop changes.

Anytime setState() is called, the component re-renders by default. The shouldComponentUpdate() method is used to let React know if a component is not affected by the state and prop changes.

Keep in mind that this lifecycle method should be sparingly used, and it exists only for certain performance optimizations. You cannot update component state in shouldComponentUpdate() lifecycle.

Caution: Most importantly, do not always rely on it to prevent rendering of your component, since it can lead to several bugs.

shouldComponentUpdate(nextProps, nextState) {
 return this.props.title !== nextProps.title || 
  this.state.input !== nextState.input }

As shown in the example above, this lifecycle should always return a boolean value to the question, “Should I re-render my component?

static getDerivedStateFromProps()

This is one of the newer lifecycle methods introduced very recently by the React team.

This will be a safer alternative to the previous lifecycle method componentWillReceiveProps().

It is called just before calling the render() method.

This is a static function that does not have access to “this“.  getDerivedStateFromProps() returns an object to update state in response to prop changes. It can return a null if there is no change to state.

This method also exists only for rare use cases where the state depends on changes in props in a component.

static getDerivedStateFromProps(props, state) {
    if (props.currentRow !== state.lastRow) {
      return {
        isScrollingDown: props.currentRow > state.lastRow,
        lastRow: props.currentRow,
    // Return null to indicate no change to state.
    return null;

Keep in mind that this lifecycle method is fired on every render.

An example use case where this method may come in handy would be a <Transition> component that compares its previous and next children to decide which ones to animate in and out.


getSnapshotBeforeUpdate() is another new lifecycle method introduced in React recently. This will be a safer alternative to the previous lifecycle method componentWillUpdate().

getSnapshotBeforeUpdate(prevProps, prevState) {
    // ...

It is called right before the DOM is updated. The value that is returned from getSnapshotBeforeUpdate() is passed on to componentDidUpdate().

Keep in mind that this method should also be used rarely or not used at all.

Resizing the window during an async rendering is a good use-case of when the getSnapshotBeforeUpdate() can be utilized.

React Component Lifecycle Diagram

The diagram below is from the official React documentation showcasing the different React lifecycle methods and when they are invoked.

React Lifecycle Methods


  • React component lifecycle has three categories – Mounting, Updating and Unmounting.
  • The render() is the most used lifecycle method.
    • It is a pure function.
    • You cannot set state in render()
  • The componentDidMount() happens as soon as your component is mounted.
    • You can set state here but with caution.
  • The componentDidUpdate() happens as soon as the updating happens.
    • You can set state here but with caution.
  • The componentWillUnmount() happens just before the component unmounts and is destroyed.
    • This is a good place to cleanup all the data.
    • You cannot set state here.
  • The shouldComponentUpdate() can be used rarely.
    • It can be called if you need to tell React not to re-render for a certain state or prop change.
    • This needs to be used with caution only for certain performance optimizations.
  • The two new lifecycle methods are getDerivedStateFromProps() and getSnapshotBeforeUpdate().
    • They need to be used only occasionally.
    • Not many examples are out there for these two methods and they are still being discussed and will have more references in the future.

If you are new to React and are looking for an all-inclusive course checkout Mosh’s Mastering React course,  that covers all the key topics that you will need to learn to be proficient with React.

If you liked this post, please share with your friends.

Adhithi Ravichandran is a Software Consultant based in Kansas City. She is currently working on building apps with React, React Native and GraphQL. She is a Conference Speaker, Pluralsight Author, Blogger and Software Consultant. She is passionate about teaching and thrives to contribute to the tech community with her courses, blog posts and speaking engagements.
Tags: , , ,

26 responses to “React Lifecycle Methods – A Deep Dive”

  1. Prathap says:

    Why you are not updating the course to latest, contextAPI, hooks, New Component Life cycles and more. I have already watched a bunch of videos that explain DidMount and willMount. I want you to update the course to latest.

    • fbob says:

      Prathap – you are ungrateful. Why don’t you produce a course?

      • randore says:

        Here, I am talking about things everyone teaches and I want hamedani to teach us more good stuff not like a bunch of people teach out there. And about course, if you will purchase my course I will definitely create one. I am not not ungrateful I have every right to ask question related to my purchase course.

    • Eli says:

      You mentioned that you already watched bunch of learning stuff. Then why don’t go and create a learning tutorial by yourself?

      • randore says:

        Creating a course is not easy and everybody knows about that right. And if I really create a course then I will not teach about a counter just like everyone else teach. I will ask people why teaching the same example which is available in React’s official documentation.

        If you are really skill full teach something useful so that you can use it in your development.

        And by the way, I have purchased so many courses from udemy (not only react) and other places. And I am confidentially saying this that Mosh is a great teacher, I like the way he teaches.

        May be my comment is little harsh but all I wanted is, I wanted Mosh to listen to their users.

        Sorry if that offends.

  2. Rayner Pupo says:

    “always return the same output when the same inputs are passed” this is more related to referential transparency, the correct explanation about why you shouldn’t change the state on the `render` is that it would trigger another rendering and that “loop” is the one we should avoid.

  3. Arun K says:

    Wow Aditi ! Thanks a lot you made my life easier!

  4. Leana says:

    Great article. So well written! I refer to it frequently. Thank you!!

  5. Diwakar Mahto says:

    Thank you Adhithi, I was looking all over the internet for something like this. Brief and Accurate!

  6. Jacob says:

    thank you very much!
    You are someone with deep understanding and good explanation!

  7. JaeHyun An says:

    Great article Adhithi!
    It helps me to understand about life-cycle method in React 🙂
    But you should update it since some method have been deprecated

  8. subhanbasha says:

    Thankyou, It helps me a lot.

  9. Dinesh Kumar says:

    Great summarized Articled

  10. […] this point, we will use the componentDidMount life cycle. This life cycle is hooked when component […]

  11. Ranjith kumar c..... (Passionate Developer)........ says:

    Thanks for the clear-cut information about React method lifecycle.. Once again thanks for your tech articles..

  12. grecdev says:

    Great assistance for real life examples. Thank you Mosh. A good teacher.

  13. Mr. Hassan says:

    Thank You Seniour to understand Lifecycle method eassier

  14. Praveen says:

    Thanks Adhithi, really good article for react beginners.

  15. DS.Vijay says:

    please tell me Redux concept

  16. fred says:

    Great post thanks ! One question : on the listed method, we can only change state “with caution”. So where shall we change it normally ?

Leave a Reply

Connect with Me
  • Categories
  • Popular Posts