Components represent the building blocks of React. They are used to define what the UI looks like and how it behaves. However, in order to be able to able to control the behavior of the UI, we’ll have to first understand how we can control the behavior of its Components.

As such, in this article, we’ll go over one of the key concepts when discussing Components’ behavior, particularly Class-based ones’, which is Lifecycle Methods.

What is the lifecycle of a Component?

As expected, the lifecycle of a component refers to its “lifetime” within our application which starts once the component is first rendered to screen up until the time we’re removing that component from the screen.

A component might be rendered to the screen, which is referred to as the “mounting phase”, it might receive some data that changes during its “lifetime”, which is referred to as the “update phase”, and it might, ultimately, be removed from the screen, which is referred to as “unmounting phase”.

At each stage of a component’s lifecycle, we are able to interact with its state and trigger certain side effects based on that.

If you wish to read a more detailed explanation of the Lifecycle process, there’s this article that goes in more depth about the topic.

What are the lifecycle methods available to us?

Now that we’ve got a better handle on the concept, let’s dig in and see what are the specific Lifecycle methods that we can use to interact with our components, when are they triggered, and what data are we able to access during that phase.

constructor()

First and foremost, we have the constructor of the actual component.

It is a mounting method that’s used to initialize state and bind methods inside of the class components. It’s also the place in which we’re calling super with props in case we want to initialize props for that component as well (You can read a more detailed explanation here).

constructor(props) {
  super(props)
  this.state = { 
    portalName: 'Upmostly'
  }
  this.handleLogin = this.handleLogin.bind(this);
}

render()

Render is a required method in class-based components. Render should be a pure method that determines the return value of the component, or what the Component will render to the screen under the form of JSX.

render() {
  return <h1>Welcome to {this.state.portalName}</h1>
}

componentDidMount()

This method is called when the component is first mounted to the DOM.

It is typically used to fetch data from external APIs, as well as to manage subscriptions or set up event listeners.

Update the state from this lifecycle method will trigger a re-render of the Component, allowing the users to see the updated state reflected in the Component.

componentDidMount() {
  axios.get(testEndpoint).then(resp => this.setState({ testData: resp }));
}

componentWillUnmount()

The method is usually used for something we call “cleanup”.

You can treat it as the opposite of the componentDidMount, as it is where you should cancel any tasks that you might have initialized when the component was mounting (Subscriptions, Event Listeners, Opened Connections, Timers, etc.).

shouldComponentUpdate(nextProps, nextState)

This method is mostly used for improving the performance of the component.

It’s called before the component gets re-rendered through the update of its props or state. By returning false we can skip the render and componentDidUpdate methods from running.

 shouldComponentUpdate(nextProps) {
    if (nextProps.portalName !== this.props.portalName) return true
    return false
  }

getSnapshotBeforeUpdate(prevProps, prevState)

This method is called shortly before any of the component output gets added/rendered to the real DOM. It helps us capture some information that can be useful when calling componentDidUpdate.

componentDidUpdate(prevProps)

This method is called right after the component re-renders.

It’s typically used for DOM manipulations or for making more efficient requests to other applications. This can be reflected in querying elements from the DOM using vanilla JavaScript methods, adding classes to elements, etc.

The prevProps parameter will be passed only if the component implements the getSnapshotBeforeUpdate method as well.

componentDidMount(prevProps) {
  if (this.props.ID !== prevProps.ID) {
    axios.get(testEndpoint)
      .then(resp => this.setState({ testData: resp }));
  }
}

getDerivedStateFromProps(nextProps, prevState)

This method is called every time the component is about to be re-rendered.

You are expected to return an object from it that will be used to update the state.

Summary

So, that’s pretty much for the article.

We’ve been able to briefly cover what the Lifecycle of a component is, enumerate the Lifecycle methods of a Class component, and more importantly, we’ve been able to understand when it takes place, what data we have access to in the meanwhile, and more importantly, what it should be used for.

I hope you’ve enjoyed the read and you now have a better understanding of each method’s use case.

See you at the next one. Cheers!