The Lifecycle of React.Component —

Understanding the birth, growth and death of a component

Much like all of life on earth, we are born into the world, we grow and then ultimately face our death, components go through the same cycle in React. The process in which components are born, or mounting, grow, or updating, and then ultimately, die or unmounting is called Component Lifecycle. Each of these cycles have their own built-in methods in which we will discuss in this blog

Lifecycle Phases and Methods

Mounting

After the initialization process, mounting begins which is when a component gets created and inserted into the DOM. Mounting has four built-in methods:

1. constructor( )
   The constructor() is called first before the mounting begins and it is called with the props as arguments. This should always start with super(props)— this is to initiate the parent’s constructor() function and allows the component to inherit from React.Component
2. getDerivedStateFromProps()
   The getDerivedStateFromProps() is called before the component renders its elements. It is also a good place to set state object based on the initial props. It takes state as an argument and returns to an object with changes to the state.
   Note: this method is only when state depends on changes in props.
3. render()
   The render() method is the only vital method in a class component. This mounts the component onto the DOM and renders JSX to the UI. When it is called, it examines this.props and this.state and returns React elements such as JSX (<div/>, or <ComponentName/>), numbers, strings, booleans, null value, and arrays.
   Note: render() will be recalled after any changes in component’s props or state.
4. ComponentDidMount()
   The componentDidMount() method is invoked after the component gets rendered. This is a natural place to add event listeners and fetching.

Updating

Unlike in Mounting, Updating occurs when where is any change in the props or state of the component that needs to be updated. These are the steps the component takes when it is being re-rendered:

1. static getDerivedStateFromProps()
   This method was seen in Mounting as it gets called before every render() . It gets used in this Lifecycle because it is a place to set state and occurs whenever there is a change in state/props. When a component gets updated, it changes, thus getDerivedStateFromProps() is invoked.
2. shouldComponentUpdate()
   The shouldComponentUpdate() method returns a boolean value. It basically looks at the change in props and states and determines if it should update and re-renders. The default value is true.
3. render()
   Once again, render() gets called when the component gets updated and it has to re-render to the DOM with the changes.
4. getSnapshotBeforeUpdate()
   It is not commonly used but is is very useful to obtain information from the DOM before the update — you can check what the values were before the update occurred.
5. componentDidUpdate()
   This method is invoked right after updating occurs in the DOM. componentDidUpdate() is generally written in the presence of the getSnapshotBeforeUpdate() method.

Unmounting

The last phase of the lifecycle occurs when a component is removed from the DOM. There is only one method in this cycle:

1. componentWillUnmount()
   This method is called right before a component is deleted and destroyed
   Note: You should not setState() in this method because the component will never be re-rendered.

Conclusion

There are other rare methods that don’t get used as often. You can read them here on Reactjs. To play around with the different methods and its code, visit W3Schools.

Just like us, React Components go through these lifecycles of being created into the DOM, updating its changes the way we go through changes in life and then is destroyed from the DOM the way we ultimately come to an end.