React Component Lifecycle
By: Destiny Setzer
Tags: Coding, Coding Interviews, Codingbootcamp, Web Development, React

So…What are the different phases of React component lifecycle?

Check out the interactive diagram here

We are born, grow, and then die. Almost everything follows this cycle in its life, and React components do as well. Components are created (mounted on the DOM), grow by updating, and then die (unmount on DOM). This is referred to as a component lifecycle. The Component Lifecycle is a set of steps that every class-based component goes through when the component is referenced.

There are different lifecycle methods that React provides at different phases of a component’s life. React automatically calls the responsible method according to the phase in which the component is. These methods give us better control over our component and we can manipulate them using these methods.

Lifecycle Methods:

Mounting

Updating

Unmounting

Error handling

Mounting Phase

Mounting a component is like bringing a newborn baby to the world. This is the component’s first glimpse of life. It is at this phase the component is created (your code, and react’s internals) then inserted into the DOM. It consists of the following methods:

constructor() * — previously known as “initialization phase”

This is the very first method called as the component is “brought to life”. The constructor method is called before the component is mounted to the DOM. Usually, you’d initialize state and bind event handlers methods within the constructor method. What’s important to note is that this is the first method invoked — before the component is mounted to the DOM.

render() *

This method is defined in each and every component . It is responsible for returning a single root HTML node element. If you don’t want to render anything, you can return a null or false value. The render method is important to understand since it is the only required method when using a class component. The render() function should be pure, meaning that it does not modify component state, it returns the same result each time it’s invoked, and it does not directly interact with the browser. If you need to interact with the browser, perform your work in componentDidMount() or the other lifecycle methods instead. Keeping render() pure makes components easier to think about.

This method is defined in . It is responsible for returning a single root element. If you don’t want to render anything, you can return a or value. The render method is important to understand since it is the only when using a class component. The function should be pure, meaning that it does not modify component state, it returns the same result each time it’s invoked, and it does not directly interact with the browser. If you need to interact with the browser, perform your work in or the other lifecycle methods instead. Keeping pure makes components easier to think about. componentDidMount() *

This is invoked immediately after a component gets rendered and placed on the DOM. Now, you can do any DOM querying operations.

Updating Phase

A React component “grows”. Better put, the component goes through the updating phase. Here, we get new Props and change State. This phase also allows us to handle user interaction and provide communication with the components hierarchy. The main aim of this phase is to ensure that the component is displaying the latest version of itself. Unlike the Birth or Death phase, this phase repeats again and again. This phase consists of the following methods.

shouldComponentUpdate()

It is invoked when a component decides any changes/updates to the DOM. It allows you to control the component’s behavior of updating itself. If this method returns true, the component will update. Otherwise, the component will skip the updating.

It is invoked when a component decides any changes/updates to the DOM. It allows you to control the component’s behavior of updating itself. If this method returns true, the component will update. Otherwise, the component will skip the updating. componentWillUpdate() — now considered legacy code (don’t use)

It is invoked just before the component updating occurs. Here, you can’t change the component state by invoking this.setState() method. It will not be called, if shouldComponentUpdate() returns false.

It is invoked just before the component updating occurs. Here, you can’t change the component state by invoking method. It will not be called, if returns false. render()

It is invoked to examine this.props and this.state and return one of the following types: React elements, Arrays and fragments, Booleans or null, String and Number. If shouldComponentUpdate() returns false, the code inside render() will be invoked again to ensure that the component displays itself properly.

It is invoked to examine and and return one of the following types: React elements, Arrays and fragments, Booleans or null, String and Number. If shouldComponentUpdate() returns false, the code inside render() will be invoked again to ensure that the component displays itself properly. getSnapshotBeforeUpdate() * Right after the render method is called, the getSnapshotBeforeUpdate lifecycle method is called next. The value queried from the DOM in getSnapshotBeforeUpdate will refer to the value just before the DOM is updated. Even though the render method was previously called. An analogy that may help has to do with how you use version control systems such as git. A basic example is that you write code, and stage your changes before pushing to the repo. In this case, assume the render function was called to stage your changes before actually pushing to the DOM. So, before the actual DOM update, information retrieved from getSnapshotBeforeUpdate refers to those before the actual visual DOM update. The way the getSnapshotBeforeUpdate lifecycle method works is that when it is invoked, it gets passed the previous props and state as arguments.

getSnapshotBeforeUpdate(prevProps, prevState) {

return value || null // where 'value' is a valid JavaScript value

}

componentDidUpdate() *

It is invoked immediately after the component updating occurs. In this method, you can put any code inside this which you want to execute once the updating occurs. This method is not invoked for the initial render.

Unmounting Phase

At this stage, the component “dies”. In React lingo, it is being removed from its world — the DOM. This phase contains only one method and is given below.

componentWillUnmount() *

This method is invoked immediately before a component is destroyed and unmounted permanently. It performs any necessary cleanup related task such as invalidating timers, event listener, canceling network requests, or cleaning up DOM elements. If a component instance is unmounted, you cannot mount it again.

ERROR HANDLING:

Oh, there’s one more phase a React component goes through. Sometimes code doesn’t run or there’s a bug somewhere. The component is going through the error handling phase. Similar to a human visiting the doctor.

As of React 16, errors that were not caught by any error boundary will result in unmounting of the whole React component tree.

static getDerivedStateFromError() *

Whenever an error is thrown in a descendant component, this method is called first, and the error thrown passed as an argument. Whatever value is returned from this method is used to update the state of the component.

componentDidCatch() — will be removed soon

This lifecycle is invoked after an error has been thrown by a descendant component. It receives two parameters:

error - The error that was thrown. info - An object with a componentStack key containing information about which component threw the error.

componentDidCatch() is called during the “commit” phase, so side-effects are permitted. It should be used for things like logging errors.

Recap of Phases:

Mounting — It is at this phase the component is created (your code, and react’s internals) then inserted into the DOM Updating — A React component “grows” Unmounting — Final phase Error Handling — Sometimes code doesn’t run or there’s a bug somewhere

Definitely check out this blog if you’d like to read more!

State and Lifecycle

React.Component

Error Boundaries