Lifecycle Methods

If you’re new to programming, or just new to React, one of the most confusing things can be lifecycle methods. What are they, why do we need them, and what should we do in each one?

Like anything else, a React component has a lifecycle. It gets created, it does stuff, and then it dies (ok, we call that unmounting). In each of those parts of its existence you have direct access to what it does with functions called lifecycle methods.

These 3 phases are called Mounting, Updating, and Unmounting.

Note that lifecycle methods only apply when you are using a class component, React Hooks don’t quite work the same way.

Mounting

Let’s start when the component starts to exist, in the mounting phase. There are 4 lifecycle methods that can happen in this phase, 3 of which are really important.

In order these are:

1. Constructor
2. static getDerivedStateFromProps
3. Render
4. componentDidMount

Since this is mainly for beginners, and you will almost never use static getDerivedStateFromProps, let’s cover the important 3.

Constructor: Since we’re dealing with a JavaScript class we need to have a constructor if you want to initialize state or bind functions to the class. This is where you set up the class, binding functions that you want to be associated with it, and setting up what your state object will look like.

Render: The render method is required in a React component, this is where all the logic you wrote actually plays out. This is generally where you want to write your JSX code and where you should never call setState, unless you’re making a demo on how cool infinite loops are.

componentDidMount: This is where you call functions that will help set up your component. Importantly this function only runs once, when the component fully mounts, which comes in really handy for loading data into you component.

Updating

Updating is everything that happens after mounting and before unmounting, and is where your component will spent the majority of its time. The updating phase has 5 total lifecycle methods within it, but there are really only two that are commonly used.

In order:

1. static getDerivedStateFromProps
2. shouldComponentUpdate
3. render
4. getSnapshotBeforeUpdate
5. componentDidUpdate

The most common of these are (of course) the render method, and notably the componentDidUpdate method. While render functions the same as in the mounting phase, it reflects any changes made during updates.

Leaving us with:

componentDidUpdate: This method runs after the component updates, and is often used to compute results based on changes that happened. You can also set state here if you wrap it in a conditional, if you don’t its back to those infinite loops. One of the best parts of this method is that it takes in two arguments, prevState and prevProps. Which are the state and props that existed before the latest update. Measuring the current state and props against these is a great way to determine if things have changed, and allows you to easily adjust you data accordingly.

Unmounting

All good things must come to an end, and yes, this includes React components. That’s where the unmounting phase comes in. When its time to clean up and go home, we use this phase, and specifically, the one method associated with it.

componentWillUnmount: This is the one and only method in the unmounting phase. It allows us to do any clean up work necessary before the component is unmounted and destroyed. Think things like removing websockets subscriptions, or cleaning any sensitive data from memory.

So there you have it, the important parts of the React lifecycle method. There are others mentioned here that you may come across a need for, but its happens rarely. With these you have a great start to mastering the lifecycle of React components.