Just as life has different phases involved, i.e we are born, grow and later die, React components experience phases as well. The phases which react components undergo are mounting, updating and unmounting.
Components interact with components to provide an interface for user interaction in web applications. However, a component – the building block of every UI we interact with – has a life cycle.
Lets go through the phases briefly.
1. Mounting phase
This is the first phase in a react component. We can as well say it is the birth phase of a react component. In this phase, a component instance is created and inserted into the DOM.(Document Object Model). We have 4 methods in this phase listed below and in their order.
1. constructor()
Constructor method is called in the mounting phase and before the component is mounted. When we call the constructor method, it accepts props as arguments. The constructor method serves 2 purposes:
It initializes a local state in the class component. This is done by assigning an object to this.state
The constructor method binds event handler methods
That's it for the constructor method on our mounting phase
2. static getDerivedStateFromProps()
The method listed above is invoked immediately before we render the elements in the Document Object Model.
_3. render() _
To render basically means to show.
The render() method is responsible for displaying the component on the screen.
This method is required for outputting React HTML elements. Both JavaScript and HTML are rendered through this method. What we see on our interface depends on what this render() method returns in the form of JSX.
It returns the JSX (React’s combination of HTML and JavaScript) that should appear in the UI.
4. componentDidMount()
Immediately after the React component is renderedinto the DOM tree, this method is initiated, just after the first render method is invoked. The componentDidMount()method allows you to execute user actions and other side effects once components are mounted.
This is it for our mounting phase and I hope it is clearer now.
We can now move to our second phase of the react component lifecycle.
2. Updating phase
Immediately after the mounting in the react component lifecycle has happened, the updating phase takes over. This is the where growing of the React component happens. In this phase, the commonly used method is the componentDidUpdate() method.
An update of the react component is done when we either have changes in the props or the data state.
The state is re-rendered using the render() method, and the updated state is returned to the UI.
3. Unmounting phase
Unmount is basically to detach. In this phase it is the death phase of the component lifecycle process.
In this phase, the method componentWillUnmount() is invoked immediately before the component is unmounted from the DOM.
In an example, a user accessing a user interface come in contract with buttons, forms and many more in our applications. Users tend to move from one component interaction to another and, on the whole, have a reactive experience.
At every point in the user interaction cycle, the React components are either inserted into the DOM tree or state changes, or the completion of component’s lifecycle.
In conclusion, briefly we have gone through various life cycle methods in React class components and why each of them exists in rendering React components.
See you in the next one and happy coding!!
Top comments (0)