React Native Development concepts - Application Lifecycle methods

React Native Development concepts - Application Lifecycle methods

Application Lifecycle methods

React Native comes with React that has its own Application Life Cycle Methods.

The life cycle methods are inbuilt function that will execute at a particular steps in the application life cycle.

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

1. Mounting Methods

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

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.

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

is called once after the whole UI for this component has finished rendering only on the client side. This is where ajax requests and DOM or state updates should occur.

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.

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

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

The componentDidUpdate() function called after the React updates the DOM, this method is mostly used to interact with updated DOM value and execute any post render events. You can use it with Library which directly interact with the DOM.

This method has its own 2 arguments:

prevProps: previous properties object.

prevState: previous state object.

3. Unmounting methods

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

componentDidCatch(): It is a part of the error handling method. It is used to find errors 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.