React components are reusable bits of code that divide UIs into smaller pieces. Each React component has its own lifecycle that users can manage during its three different phases: mounting, updating, and unmounting. Mounting is when a React component mounts a document object model (DOM). Updating is when there is a change to a React component's
props. Unmounting is when a React component is removed from the DOM.
Users can trigger many behaviors and effects between the mounting and unmounting stages. Knowing what is happening to the React components during their stages is essential in understanding how these components work. This understanding helps users build practical applications and enables them to debug more effectively if their components encounter issues.
This article will walk through the fundamentals of the React component lifecycle by building a sample app.
There are two ways to create React components: with classes or functions. For this article, we'll use classes to see how their methods allow running statements at different points in the component’s lifecycle. For each lifecycle, we’ll use code samples to see the class methods at work.
To follow along, create a sample application called
lifecycle-app with create-react-app:
Start your development server, and the website should be live on
src/App.js with the following code, which has a
class App component:
localhost:3000 should now output the word Lifecycle.
How the React component lifecycle works
A component’s lifecycle has three phases: mounting, updating, and unmounting.
Let's now walk through what each phase does and how it impacts our example.
The mounting phase is the point at which a component mounts a DOM. This phase of the process represents the “birth” of the component.
We’ll now mount two components to see this phase in action.
Use the code below to define a component in a new file,
localhost:3000 displays the image below:
This updated display confirms that we’ve mounted the
Button components on the DOM. The React class components expose some methods we can call in the mounting phase.
constructor method is the first step in the mounting phase. It lets us declare a component’s props and state. Let's call it before the component mounts.
src/Button.js, the constructor method looks like this:
Think of this class method as the place to define the internal data (characteristics) of a component before it’s born. For that reason, we shouldn’t include any other processes (for example, an API request) until after mounting the component.
getDerivedStateFromProps method is static. It should be called after the
constructor method. According to the React documentation, this method exists for rare occasions when the
state of a component depends on the
props passed to it. As the name implies, we derive the component’s
state from the
props it receives.
disabled state of the
Button component depends on an
isLoading prop that's passed to it. Let's use
getDerivedStateFromProps like this:
This method receives two arguments when called: the updated
props and the previous
state of the component. Then, it checks whether
true. If so, it returns a derived
state when the
disabled state is
true, which becomes the updated
state of the component. If
false, it returns
null, which means “Do not update the state.”
There are many ways to achieve this state without
getDerivedStateFromProps. That’s why the React docs mention that it exists only for sporadic cases.
In the previous methods, we defined some of a component’s internal data (
render method triggers the rendering of a component on a DOM. Implementing this method is essential because the component will not mount the DOM without it. The React element returned from this method is mounted on the DOM, as seen in the previous examples.
Let's call the
componentDidMount method when rendering a component. We can aadd the following code to this method to execute when the component mounts:
When we run the development server and this component renders on the screen, we should see the following in the browser console: “I am born.”
This method is an excellent place to include additional effects, such as making API requests. Also, we can use this method to update the component’s state, causing re-rendering to occur.
The updating phase involves several changes to
state. When a component is born, it grows. Growth refers to the changes that occur in the component. They could be
state changes (for example, in
loaded state changes from
true). Or, it could be
prop changes (for example, the
isLoading prop changing from
Here are some class methods called during this phase.
As in the mounting phase,
getDerivedStateFromProps is a method that allows us to get an updated derived
state from the
props. We also call this method in this phase when the
props of a component change.
We call the
shouldComponentUpdate method after
getDerivedStateFromProps. It allows us to specify a component to update or not (after a
state change). By default, this method returns
true, but we can write logic that returns
For example, in
shouldComponentUpdate method receives the updated
props and the updated
state. The logic compares the
isLoading property of the updated
props and the
disabled property of the updated
state. If they are equal, it returns
false, which means the component is not re-rendered. Otherwise, it updates the component.
We can call the
getSnapshotBeforeUpdate method just before a component is re-rendered. As the name implies, this method allows us to take a “snapshot” before updating a component.
src/Button.js, this method looks like this:
Usually, this method is rarely used. Still, it helps to take a snapshot of a DOM before a component is re-rendered. A possible use case is to take a snapshot of scroll positions or the width of an element before re-rendering a component. This is because re-rendering could cause the scroll position or an element’s width to change.
snapshot object returns passes to the
render method we walked through in the mounting phase also renders the component when it is updated if
Just like the mounting phase, the
componentDidMount method is in the updating phase. We can call it when the component is updated and rendered on the DOM. Any code we write in this method executes when calling the method.
We do not call this method when the component is rendered the first time. We only call it on subsequent updates and re-renders. It receives three arguments: the previous
props object, the previous
state object, and the
snapshot object returned from
This is a great place to make another API request based on a changed
prop, for example.
The last lifecycle phase of a component is the unmounting phase. In this phase, a component dismounts from a DOM. There are different ways to do this.
For example, we can render the Button component conditionally based on a
showButton boolean state in
src/App.js like this:
App component mounts,
toggleShowDown, which updates the
showButton state to
Button on a DOM. This component may go through several updates until
false. Then, the
Button component unmounts the DOM.
There is only one method currently called in the unmounting phase:
We can call the
componentWillUnmount method to unmount a component.
For example, let's add the
componentWillUnmount method to
src/Button.js to unmount the
We can try this with our browser. Clicking
div updates the
showButton state to
Button to render. In the browser console, we should see “I am born.”
div again to update the
showButton state to
Button to be unmounted. When we check the browser console, we should see “I'm leaving the DOM 😭”:
componentWillUnmount method is beneficial for cleaning up side effects in React applications, such as a component that makes an API request when mounted and updates the state with the data from the API. If such a component unmounts before the API request completes, we can cancel the API request with this method.
And we have now walked through a React Component Lifecycle. Components have a lifecycle that consists of three phases: mounting, updating, and unmounting, Understanding how the different phases work can give you an in-depth understanding of your component's lifecycle.
To learn more about React components, check out our blog for content such as React vs. Vue: which to use for building admin panels, how to build a React component library, how to force React components to re-render, and more.
Introducing Airplane Views: Build React-based UIs quickly
Airplane is the developer platform for building custom internal tools. You can transform scripts, queries, APIs, and more into powerful workflows and UIs. Airplane Views is a React-based platform that allows users to quickly build custom UIs for their organizations.
Airplane Views offers an extensive React-based component library and a template library, making it very easy to get started. Since building Views in Airplane is React-based, you can implement your own custom components or use third-party component libraries easily.
Airplane also offers powerful built-ins, such as permissions setting, audit logs, job scheduling, and more.
To try it out yourself and build your first UI in minutes, sign up for a free account or book a demo 👋. If you are at a startup that is series A or earlier with under 100 employees, check out our Airplane Startup Program for $10,000 in Airplane credits for a year.