An essential topic of React Native

The Ultimate Guide to Component Life Cycle Method in React Native

A comprehensive guide on how the Life cycle methods work in react native and execute the whole cycle of methods before and after rendering and updating a component

Background:

Lifecycle method executes after the component is mounted and rendered to the DOM. It is a lifecycle method that executes after an update in the component and checks if a specific prop or state has changed. Each component in React has a lifecycle that you can monitor and manipulate during its three main phases.

Lifecycle Components in React Native have 3 main phases:

1. Mounting
2. Updating
3. Unmounting

Mounting:

It’s the starting point of the lifecycle of React components. It initializes the states, renders the component, changes the states, etc.

Mounting phase uses three methods sequence to execute phase:

• Constructor()

A constructor sets the props and states of the component. It initializes the states and props with some values ​​that will render inside the component.

Here super(props) gets the props from the parent component and one state text with the value “Welcome to React Native” in the below code:

• Render()

Next, the mounting phase moves to the render method. The render method renders the main component. It should return a single View element or react fragment.

Here’s render method returns a single View element. Text element renders the text of state which is inside the curly braces.

• ComponentDidMount()

After rendering, it execute the ComponentDidMount() method. This method updates the states and props after rendering. It updates the state value and calls the render method once again which renders the component with updated state values.

Here’s the setTimeout() function which executes after 3 sec. of rendering the main component. It updates the state (text) with the value “Let’s start Mobile dev” and calls the render method once again with the updated value.

Calling an API after is the best use case of ComponentDidMount method.

Here’s the complete execution of the mounting phase:

Updating:

Updating phase calls different methods in case of any update in states or props. Some methods execute before the render method and some are called after the render method.

Updating phase consists of two main methods:

• Render()

Render method returns a block (react fragment) of the component to render in virtual DOM. It consists of different HTML tags.

• ComponentDidUpdate()

When a state or props change, the component renders again. ComponentDidUpdate method just called after rendering. It allows you to perform some tasks after rendering but it doesn’t re-render the component again. If a user tries to change the state, it gets into the loop. User can change something in DOM.

Unmounting:

Unmounting is the last phase of the component life cycle method. In this phase, a component is removed from the DOM.

As it is the end of the cycle, it just executes a single method:

• ComponentWillUnmount()

This method is called before the component gets destroyed. It’s used to clean up the things before the component starts unmounting like terminating database connection, clearing states, etc.

How do all phases work together?

Mounting and Updating phases have multiple life cycle methods. Mounting phase starts the component life cycle by initializing states and rendering the component. ComponentDidUpdate method just called after rendering. ComponentDidMount method updates the states and calls the render method again to re-render with updated states and values. When the user closes the browser, the ComponentWillUnmount method is called.

There are some other methods that are not used frequently and having knowledge about them is useful:

• ShouldComponentUpdate(): It returns a Boolean value that specifies whether the compoent should continue with the rendering or not. By default, it’s true.
• getSnapshotBeforeUpdate(): It stores the previous values of the state after the component rendering with updated state values. It is used with the componentDidUpdate method.

So both phases share some methods while unmounting phase has a single method that is rarely used.

Conclusion

Component lifecycle concept is very important for building optimized and react apps efficiently. Each method of the component life cycle provides more control over the development process.

Modern react apps use React hooks which use functional components and provide the same functionalities of component life cycle methods.