React Component Life Cycle

React Component

Components are the building blocks of any React app, and many of these would feature a typical React app. Simply put, a component is a JavaScript class or function that optionally accepts inputs i.e. properties(props) and returns a React element describing how a UI (User Interface) segment should appear Specially components are reusable, we don’t need to create a new component for just do the same thing. Usually React app is considered as tree of component.

Component LifeCycle

In React, each component has a lifecycle that you can control and modify during its three main phases. The three stages are: Montage, Upgrade, and Unmount.

Mounting

A component mounts when it is first created and inserted into DOM. For example: when it is rendered first. The main method that are available in this phase are,

• constuctor()
• render()
• componentDidMount()

Render

Render is the most used and required method in a component. When we call render(), it examines this.state and this.props and return the specific output. If the element React has previously been made into a container, it will update it and only mutate the DOM as required to represent the new element React.

Component Will Mount

As the name clearly suggests, this function is invoked right before the part is installed on the DOM i.e. this function is invoked once before the function render (is first executed.)

Component Did Mount

Like the previous one this function is invoked right after the part is installed on the DOM i.e. this function is invoked once after the render) (function is first executed.

Updating

React is a JS library that lets you easily create Active web pages. The active web pages are now unique pages which function according to the user. For each user the website is behaving differently. In the Light Theme, User A may write some code in C while another User may write a Python code in the Dark Theme all at once. This act dynamically

getDerrivedState From Props And State

It exists just for one reason. It allows a part to update its internal state as a result of modifications to props. Fpr examples, such as recording the current direction of scrolling based on a change of offset prop, or loading external data defined by a source prop.

ShouldComponentUpdate

Each state or props update re-render the page by default, but this may not always be the desired result, it is sometimes preferred that the page will not be repainted while updating. The function shouldComponentUpdate() fulfills the requirement by letting React know whether the update will affect the performance of the component, or not.

componentWillUpdate

As the name clearly indicates, this function is invoked before returning the object, i.e. this function is invoked once before executing the render() function after State or Props update.

componentDidUpdate

Likewise, this function is invoked after rendering the object, i.e. this function is invoked once the render() function is executed after State or Props updates.

Unmounting

This is the final stage of the component’s lifeycle which is the process of unmounting the DOM component. Sole member of this step is the following function.

componentWillUnmount

This function is invoked before the component is ultimately unmounted from the DOM i.e. this function is invoked once before the component is deleted from the page and this signifies the end of the lifecycle.

So far we have discussed about the components and it’s key methods. Components are the most important concept of React. We can’t find a React app without components. So it’s important to know about react components.