React JS – Life Cycle Methods In React

This article’s main focus is on the React JS – Lifecycle methods, its uses in our programme, and Functions that utilizes this methods.

Reacap :

• In the previous articles, get introduced to the State of React and React props. If you are new to React or need a gentle introduction to the React features that are most frequently used throughout articles, review this once.

What are these life cycles method?

React Lifecycle methods are the series of events that happen from the starting of a React component to its ending. The latest version of React JS has said some lifecycle methods are unsafe to use so I will not talk about them in this article as those will be demolished in future releases.

Every component in React should go through the following lifecycle of events.

• Mounting ->Birth of the Component
• Updating- Growing of component
• Unmounting- End of the component

Common React JS Lifecycle Methods

1.Render () :

This is the most useful life cycle method to React as it is the only method that is required. What it does is it is handling the rendering of your component as it name says while accessing this.sate and this.props. This is also called when there is Mounting and Updating. You can not call setState() inside the Render() method. Look at following example which renders JSX snippet. If there is nothing inside the render method then it will return NULL.

2.Constructor () :

The constructor for a React component is called before the component is mounted. When implementing the constructor for a React.Component, you should call super(props) before further moving. Otherwise, this.props it will be undefined in the constructor, which can lead to a major error in the application. This method implementation is mainly for following reasons :

1. Initializing the state
2. binding our component

for example

3. componentDidMount()

Now the component has been mounted. This is the time where the next lifecycle method componentDidMount come in to play.

This method is named as soon because the component is mounted and prepared. This is the best place to initiate API calls in order to fetch data from remote servers. In this method, you can use setState which will cause another rendering but It will happen before the browser updates the UI. This is to ensure that the user won’t see the intermediate state.

Other uses

Here AJAX requests and DOM or state updates should occur. This method is also used for integration with other JavaScript frameworks like Node.js and any functions with late execution such as setTimeout or setInterval

4.componentWillMount() : This is executed before rendering, on both the server and the client side.

5.componentWillReceiveProps()

This allows us to match the incoming props against our current props and make logical decisions supported the worth. We get our current props by calling this.props and the new value is the nextProps argument passed to the method. It is invoked as soon as the props are updated before another render method is called.

6.shouldComponentUpdate()

This method allows your Component to exit the Update life cycle if there’s no reason to use a replacement render. Out of the box, the shouldComponentUpdate() may be a no-op that returns true. This means whenever we start an Update during a Component, we’ll re-render.

7.componentWillUpdate () : This called just before the rendering.

In the following example, we will set the initial state in the constructor. The setNewCount is used to update the state. All the lifecycle methods are inside the component.

This will renders the following as output :

If you’ve enjoyed this article, please show some love by sharing it with others. Thank you!

LInks :

React – life cycles methods (official )