Lifecycle of React Native Application Component

Lifecycle of React Native Application Component

Hello Guys, Today we will talk about the Lifecycle of React Native Application Component. Lifecycle methods are inbuilt methods. As a Mobile Application developer, we have to take care of the Lifecycle of each screen/activity/component because sometimes we have to load the data accordingly.  For an Example, if I want to initialize some connection when the user opens the screen reader and close it when the user closes it; In both the cases we have to have some knowledge about the Lifecycle methods so that we can perform such actions.

The lifecycle of React Native Application

There are 4 types of Lifecycle methods available in React Native:

  1. Mounting methods
    • constructor()
    • componentWillMount()
    • render()
    • componentDidMount()
  2. Updating methods
    • componentWillReceiveProps()
    • shouldComponentUpdate()
    • componentWillUpdate()
    • componentDidUpdate()
  3. Unmounting methods
    • componentWillUnmount()
  4. Error handling methods
    • componentDidCatch()

Description

1. Mounting Methods:

1. constructor(): It is the first method called when we open a screen, it is mostly used to create States.

2. componentWillMount(): It is called right after constructor(), used to call asynchronous tasks or network calls.

3. render(): Render is the most important Lifecycle method because it is used to render UI or we can say the main View of the screen.

4. componentDidMount(): Is called after render method, It is used for the network calls.

2. Updating methods:

Updating methods are used to update the value of Props or State to React Native. These methods are called automatically when a component re-renders.
1. componentWillReceiveProps(): It is called before the component dose anything with new props, We would send the next prop as an argument inside it.

2. shouldComponentUpdate(): It is called every time before the screen or parent component re-renders. We can stop re-rendering of the screen by passing false in this method.

3. componentWillUpdate(): It is called before the re-rendering when new state or props is received for updating. It does not allow the this.setState({}) method.

4. componentDidUpdate(): It is called after the rendering, this method is mostly used to interact with updated rendering values and execute any post render events.

3. Unmounting method:

1. componentWillUnmount(): It is called when the component is removed from the DOM, Users can clear any running timers, stop network requests and cleaning any previously stored value in the application in this method.

4. Error handling method:

1. The componentDidCatch(): It is a part of the error handling method. It is used to find error between JavaScript code and handle them by passing the correct message or argument. It will help us to use any try /cache block to handle any error.

That was the different methods which are called in a Lifecycle of any Screen/Activity/Component. You can try it out by making an example This post will help you to know more about the way you can make a React Native project or by replacing the following code in your existing project’s App.js

App.js

         

 

You can also try it on Snack

That was the Lifecycle methods of the React Native App. If you have anything to share please comment below or contact us here.

Have a happy codding.
Hope you liked it:)

How useful was this post?

Click on a star to rate us!

Average rating / 5. Vote count:

As you found this post useful...

Follow us on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

You have successfully subscribed to the newsletter

There was an error while trying to send your request. Please try again.

About React will use the information you provide on this form to be in touch with you and to provide updates and marketing.