Nerd For Tech
Published in

Nerd For Tech

The lifecycle of Components ReactJS

Each and every React Component has there are unique lifecycles of its own, also the component known as a series of methods, and they are invoked in different stages of the component existence. React Component goes through four different stages of its lifecycle as follows.

  1. Initialization
  2. Mounting
  3. Updating
  4. Unmounting

Initialization Stage

The React docu calls this an anti-pattern, in the Initialization stage, the component is constructed with the given Props and State and this is carried out in the constructor of the component class.

There are mainly three pieces of data that the JSX depends upon,

  1. “error”: This is the standard message that is displayed when there is a bug in the system, or a rendering has a mistake in it.
  2. “loading”: Loading is when the application is fetching the API data.
  3. “users”: The data that is retrieved from the API is critical as well.

Mounting Stage

Then in the mounting stage of rendering the JSX returned by the render method itself. There are 3 main methods in this stage :

  1. getDerivedStateFromProps();
  2. render();
  3. componentDidMount()

getDerivedStateFromProps(): This is a static method and it is rarely been used in the lifecycle. This method is only used when the state of the component depends on dynamic change over time.

render(): Render is what mounts the component onto the browser in this state. It is a classic method that gives the same output every time the same input is provided. It’s a standard function that is used extensively in the ReactJS coding framework.

componentDidMount(): This is the final ReactJS hook method that is executed after the component and its children components are rendered in the DOM. You can access the DOM efficiently using this component. You can also initialize using several other libraries that can be incorporated into the final output. You can also make the right API calls under this method so that you can retrieve the data the right way.

Updating Stage

Updating is the stage when the state of a component is updated and the application is repainted. There are 5 methods called in this stage

  1. getDerivedStateFromProps()
  2. shouldComponentUpdate()
  3. render()
  4. getSnapshotBeforeUpdate()
  5. componentDidUpdate()

shouldComponentUpdate(): The method tells the program about the state of rendering when it is updated. If new props or rules are being updated, then a rendering can be done or skipped. This is important to code in properly as there are evolving states in the program as well. Updating the method as true/false is the proper approach. The default here is true, which can be changed as per the code.

getSnapshotBeforeUpdate(): This is executed when the prior method returns the answer of true. It’s then used to prepare the upcoming render, in the case where some previous calculation is necessary before returning a response. For more complex programs, this method can be used as well.

componentDidUpdate(): This is then executed when the updated component has been updated in the DOM as well. You can then initiate new libraries to reload as well so that you can maintain an updated program throughout the process.

Unmounting Stage

In the final stage of Unmounting: As the name suggests Unmounting is the final step of the component lifecycle where the component is removed from the page to produce the outcome via unmounting. Only one method is been called in this stage which is componentWillUnmount,

componentWillUnmount(): This is the last method in the lifecycle as it pertains to the core unmounting and removal from the DOM. The cleaning up of the component is also performed here. This is also used in the logging out of users when they want to clear out the program from their browser.




Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store