React web apps are a collection of independent components that run according to the interactions made with them. The React component Lifecycle could be thought of as the “Lifetime” of the component. Lifecycle methods are a series of events that take place throughout the birth, growth, and death of a React component.
The three Phases of React Components are:
In this phase, the props and initial state of the component are defined by the developer; this is generally done in the constructor of the component. Here is an example of the initialization stage.
Mounting is the stage in which the instance of a React component is created and inserted in the given DOM. It consists of some methods.
- componentWillMount() - This is invoked right before a component gets rendered into the DOM. When we call setState() inside this method, the component does not re-render.
- componentDidMount() - This is invoked after a component gets rendered and placed on the DOM.
- render() - This method is defined in every component. It returns a single root HTML node element. If we don't want to render anything, we can return a null or false value.
React is a go-to JS library for creating Active web pages (behave according to their user) easily. Updation is the phase where whenever a change is made to the state or props (events such as clicking, pressing a key on the keyboard, etc) the react component is re-rendered. Methods included are called in the following order when the component is being re-rendered:
- static getDerivedStateFromProps()
The next phase in the life-cycle is when a component is removed from the DOM, or unmounting as React does.
React has one built-in method that gets called when a component is unmounted:
- componentWillUnmount() - This method is called when the component is about to be removed from the DOM.