React.js – Component Lifecycle Methods

We would cover React.js Component Lifecycle methods under the following sub-sections:

1. What are Component Lifecycle Methods
2. Mounting Lifecycle Methods
3. Updating Lifecycle Methods
4. UnMounting Lifecycle Methods
5. Error Handling

1. What are Component Lifecycle Methods

You can think of Component life cycle methods a the series of events that occur from the creation of a component to when it goes out of scope. You can override these methods and perform any action you want at certain stages.

All React components go through these lifecycle methods. So it’s necessary that you have a good knowledge of them. React component lifecycle are classified into three parts:

Mounting – when an instance of a component is being created and inserted into the DOM. The method here are: constructor, getDerivedStateFromProps, render and componentDidMount

Update – when a component is being re-rendered due to changes in it’s props or state. Method in these group are: getDerivedStateFromProps, shouldComponentUpdate, render, getSnapshotBeforeUpdate and componentDidUpdate

Unmount:  – when a component is being removed from the DOM. The only method here is componentWillUnmount

Error Handling – when there is error during rendering, in a lifecycle method or in the constructor or child component.

Let’s now take a more detailed look at the lifecycle methods

2. Mounting Lifecycle Methods

constructor(props) – called whenever a new component is created. A good place for initializing state or binding event handlers to class instance. Never cause side effects inside a constructor, like making HTTP request. You also need to call call the base class constructor using super(props).

static getDerivedStateFromProps – this is a rarely used lifecycle method. Called when the component state depends on changes over time. Since it is a static method, it does not have access to the ‘this’ keyword. Similarly, never cause side-effects in this method.

render – this is a required component. This is a pure function that reads the props and state return the JSX. Don’t change the state in this method. Immediately after the render method, the children’s lifecycle methods are called.

componentDidMount – this method is called only once in the lifecycle of a given component. It is invoked immediately after a component and all it’s children components have been rendered to the DOM. It is a good place to cause side-effect or load data.

3. Updating Lifecycle Methods

static getDerivedStateFromProps(props, state) – recieves props and state as parameter and returns either null or an object the represents the updated state. Called anytime the state is re-rendered

shouldComponentUpdate(props, nextState) – dictates if the components should re-render or not.

render – as before, it returns the JSX which represents the UI.

getSnapshotBeforeUpdate – called just before any changes from the virtual DOM are to be reflected in the DOM.

componentDidUpdate – called after the render is completed in the re-render cycle. Called only once in each re-render cycle.

4. Unmounting Lifecycle Method

There is only one method in this group: componentWillUnmount()

componentWillUnmount – this lifecycle method is called immediately before a component is unmounted and destroyed. In this method, you can perform certain clean-up tasks such as cancelling network requests or subscriptions and  removing event handlers. The setState method cannot be called from this method.

5. Error Handling Method

As mentioned, there are only two methods in this group:

• static getDerivedStateFromError(error)
• componentDidCatch(error, info)

These two methods are called when there is error either during rendering, in a lifecycle method or in the constructor or child component. More details on this would be covered in the Error Handling section