Component Lifecycle React

Every React Component has a lifecycle of its own, lifecycle of a component can be defined as the series of methods that are invoked in different stages of the component’s existence.

A React Component can go through four stages of its life as follows.

• Initialization: This is the stage where the component is constructed with the given Props and default state. This is done in the constructor of a Component Class.
• Mounting: Mounting is the stage of rendering the JSX returned by the render method itself.
• Updating: Updating is the stage when the state of a component is updated and the application is repainted.
• Unmounting: As the name suggests Unmounting is the final step of the component lifecycle where the component is removed from the page.

INITIALIZATION and MOUNTING

The Constructor () function is upon the initialization of the component before the mounting when an instance of a component is created and inserted into the DOM.Generally the state of a component is created inside this function. After the Constructor function the ComponentDidMount() function is called which indicates that the component is ready inside the DOM. When deciding where to put a fetch get request either in the Constructor or inside the ComponentDidMount() choose the latter because if we put fetch in the constructor the Component is being created but it may still be not inserted in the DOM and if it’s not then the fetch may not get executed so always put that inside the ComponentDidMount() function which makes sure that the fetch always gets executed since by then the component has been created and inside the DOM and a SetState method can be called to change the state of the data being initialized inside the constructor.Any kind of DOM manipulations and data fetching should be done inside this function.The ComponentDidMount() only triggers once when the page is loaded and the Component has mounted.

UPDATING

ComponentDidUpdate() function takes two parameters the previous Props and the previous State of the component. This function listens for a change in state and always gets triggered when the state is updated.Here we can compare the current and previous props and state also we can do DOM manipulation based on the change of the Props or the State. The setState method here is used with conditions otherwise it may cause an infinite loop to run. It is best to use props directly inside this function otherwise copying props into state might cause bugs in the code.

Screenshot from Flatiron School

UNMOUNTING

ComponentWillUnmount() function runs only once when removing the element from the DOM that we don not need anymore. The setState is not called here because once the component is unmounted it will never mount again. We should always use this function with caution.

React components automatically renders and updates based on a change in state or props.

Screenshot from Flatiron School

ERROR BOUNDARIES

In the past errors used to mess up any React code and the whole app would break and these errors usually caused by earlier errors inside the code. To solve this problem React 16 used the concept of “error boundary”. Error boundaries are React components which would catch errors anywhere inside the Child component tree and log those errors and prevent the component tree from crashing. Error boundaries catch errors during rendering, in lifecycle methods and inside the constructor . The Error Boundary is created as a class component and inside this component two functions can be used — static getDerivedStateFromError() and the ComponentDidCatch(). One of them or both of them can be used based on the functionality we want.

The static getDerivedStateFromError() takes error as parameter and renders a fallback UI once the error has been thrown. The ComponentDidCatch() takes two parameters error and information and logs that error. Error boundary can be used as a component . Error boundaries can not catch errors within themselves but they can catch errors below the component tree. We can place them anywhere inside the top level component or inside a specific one.

There is however another method component.forceUpdate() which can forcefully render a react state or props if the render() method is dependent on some other data. This function should however be normally avoided and only be used with extreme caution.

Here I have only covered the main lifecycle methods though there are other methods.

Rarely Used lifecycle methods are:

shouldComponentUpdate()

static getDerivedStateFromProps()

getSnapshotBeforeUpdate()

Reference

React Docs

GeeksforGeeks