React Native Component Lifecycle Explained

Before we start with Explaination of React Native Component Lifecycle. Let us have some introduction about React Native Components.

What Is React Native Component?

Components let you split the User Interface into independent, reusable pieces, and think about each piece in isolation. Components are the building blocks of React Native Application. Every Class of function can be used as a Component in another class or function.

Conceptually, components are like JavaScript functions. They accept arbitrary inputs called props and return React elements describing what should appear on the screen.

React lets you define components as classes or functions. Components defined as classes currently provide more features than functions. To define a React component class, you need to extend React.Component as given below:

import React, { Component } from 'react';
import { Text, View } from 'react-native';

export default class HelloWorld extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" 
      }}>
         <Text>Hello, world!</Text>
      </View>
    );
  }
}

The only method you must define in a  React.Component  subclass is called render(). This method is the main method which do rendering of data on screen.

Alternatively, you can also create components using functions as given below:

function HelloWorld(props) {
  return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" 
      }}>
         <Text>Hello, world!</Text>
      </View>
    );
}

const helloWorldElement = <HelloWorld/>;

In the above Example, HelloWord is a function component which can be used with tag <HelloWorld/> in another function or class.

React Native Component Lifecycle

Each component has several stages which it goes through during its lifetime, that is called Component Lifecycle. Each component has several lifecycle methods that you can override to run code at particular times in the process. All lifecycle stages and methods are given below:

Mounting

Mounting can be defined as process which is used when component is created and inserted into the DOM. These methods are called in the following order when an instance of a component is being created and inserted into the DOM:

• constructor():- The constructor for a React component is called before it is mounted. When implementing the constructor for a React.Component subclass, you should call super(props) before any other statement. Otherwise, this.props will be undefined in the constructor, which can lead to bugs.
• static getDerivedStateFromProps():- It is invoked right before calling the render method, both on the initial mount and on subsequent updates.
• render():- This method renders the data to display on screen.
• componentDidMount():- It is invoked immediately after a component is mounted and inserted into the DOM tree. If you need to load data from a network, this is a good place to instantiate the network request.
• UNSAFE_componentWillMount():- It is invoked just before mounting occurs. It is called before render(). Previously this lifecycle was named as componentWillMount(). This method is marked as “legacy”. And legacy methods will still work, but React Native don’t recommend using them in the new code.

Updating

An update can be caused by changes to props or state. These methods are called in the following order when a component is being re-rendered:

• static getDerivedStateFromProps():- It is invoked right before calling the render method, both on the initial mount and on subsequent updates.
• shouldComponentUpdate():- It is invoked before rendering when new props or state are being received. Use it to let React know if a component’s output is not affected by the current change in state or props. The default value is true, it means to re-render on every state change.
• render():- In update state, it gets called for re rendering.
• getSnapshotBeforeUpdate():- It is invoked right before the most recently rendered output is committed to e.g. the DOM. It enables your component to get andcapture some information from the DOM (e.g. scroll position) before it is potentially changed . It means it is used to capture state and props immediately before updating some data.
• componentDidUpdate():- It is invoked immediately after updating occurs. This method is not called for the initial render.You can use it to operate on the DOM after the component has been updated.
• UNSAFE_componentWillUpdate() :- It is invoked just before rendering when new props or state are being received. You can consider using this as method to perform preparation just before any updates in the code occurs. Previously this lifecycle was named as componentWillUpdate(). This method is also marked as “legacy”. And legacy methods will still work, but React Native don’t recommend using them in the new code.
• UNSAFE_componentWillReceiveProps() :- It is invoked before a mounted component receives new props. Previously this lifecycle was named as componentWillReceiveProps (). This method is also marked as “legacy”. And legacy methods will still work, but React Native don’t recommend using them in the new code.  

Unmounting

Unmounting can be defined as process which is used when component is removed from the DOM. These methods are called in the following order during unmounting:

• componentWillUnmount():- It is invoked immediately before a component is unmounted and destroyed. You can perform any necessary cleanup in this method, such as canceling network requests, or cleaning up any subscriptions that were created in componentDidMount() method.

Error Handling

These methods are called when there is an error during rendering, in a lifecycle method, or in the constructor of any child component.

• static getDerivedStateFromError():– This method is invoked after an error has been thrown by a component. It receives the error that was thrown as a parameter and should return a value to update state.
• componentDidCatch():- This method is invoked after an error has been thrown by a descendant component. It receives two parameters First is error (The error that was thrown.) and second is info( An object with a componentStack key containing information about which component threw the error. )

Some Other Useful Component Methods

So Methods defined above are the methods which are called by React Native during the lifecycle of React Native component. But there are some other methods also which you can call on components which are given below:-

• setState():- This method applies changes to the component state. And it tells React that this component and its children need to be re-rendered with the updated state. This is the primary method you use to update the user interface in response to event handlers and server responses. React does not guarantee that the state changes are applied immediately. For better performance, it may delay applying changes.
• forceUpdate():- When your component’s state or props change, your component will re-render everytime. But if your render() method depends on some other data, you can tell React that the component needs re-rendering by calling component.forceUpdate() method. But it is recommended by React Native that you should try to avoid all uses of forceUpdate() and only read from this.props and this.state in render() .

I hope that now you have the basic understanding about React Native component lifecycle.

Thanks!