React Life Cycle Methods

 

React lifecycle methods we can describe as the series of events that happen from the start of a React component to its end. Every component in React goes for a lifecycle of events.

·        Mounting

·        Update

·        Unmount

Momentarily, let's learn about the React lifecycle methods each by each.

render()

The render() method is a commonly used lifecycle method. This is because render() is the only essential method in a class component in React.

As it is obvious in the name it manages the rendering of your component to the User Interface. That can be done during the mounting and updating the component.

React expects render() is pure. Pure functions mean functions that do not have any troubles and will not pass diffrent outputs to the same input. This indicates that you can not setState() inside a render(). but You cannot modify the component state within the render().

If you want to modify state that should appear in the other lifecycle methods, hence keeping render() pure. Moreover, keeping your render() manageable and clear without state updates makes your app maintainable.

Here is an example of a plain render() in React.

class Hello extends Component{

   render(){

      return <div>Hello {this.props.name}</div>

   }

}

componentDidMount()

Now component has been mounted and ready, then the next React lifecycle method componentDidMount() comes to the board.

componentDidMount() is called as soon as the component is mounted and ready. This is a great point to launch API if you need to load data from a remote endpoint.

not like the render() method, componentDidMount() supports the use of setState(). Declaring the setState() will update state and make another rendering however it will appear before the browser updates the UI. That is to assure that the user will not notice any UI updates with the repeated rendering. You may modify the component state inside the componentDidMount(), however, do it with caution.

componentDidUpdate()

 As soon as the updating happens this method will be invoked. The most typical use situation for the componentDidUpdate() method is updating the DOM in return to prop or state changes.

setState() can be called in this lifecycle, but you just need to wrap it in a condition to check for state or prop changes from the previous state. because of a false usage of setState() an infinite loop can occur.

You can change the component state inside the componentDidUpdate(), but keep in mind to use it with caution

consider the below example that describes a common usage example of this lifecycle method.

componentDidUpdate(prevProps) {

 //Typical usage, don't forget to compare the props

 if (this.props.userName !== prevProps.userName) {

   this.fetchData(this.props.userName);

 }

}

consider that the above example that we are analyzing the current props to the previous props. This is to verify if there has been a difference in props from what it currently is. so here, there no need to make the API call if the props did not change.

componentWillUnmount()

As the name describe this lifecycle method is invoked just before the component is unmounted and killed. If there are any cleanup actions that are necessary, this would be the best place.

Modifying the component state is not capable within the componentWillUnmount lifecycle.

This component will never be re-rendered so that we cannot call setState() throughout this lifecycle method.

ex:-

componentWillUnmount() {

 window.removeEventListener('resize', this.resizeListener)

}

Common cleanup activities performed in this method involve removing timers, cancelling API calls, or clearing any caches in storage.