React Component LifeCycle

React Component LifeCycle

ยท

3 min read

In this blog, we shall see what is the React Component Lifecycle which is used for Components, and how it works.


So what is it? Is it something new ? Or is it something we already know? You might get a lot of questions when hearing about it for the first time. Well, let me tell you, it is something you already know but haven't known technically.

Consider the following sequence:

What do you see in this image? Let me know in the comments on the blog.

So the image consists of a man and a chair. There are 3 variations here :

  1. The man could see the chair.

  2. The man sits on the chair.

  3. The man adjusts himself.

  4. The man stands from the chair and goes away.

Now how does this apply to the React Component LifeCycle? 3 methods take place: Mounting, Updating, and UnMounting.


Consider the man as the component of a website and the chair be the website. When the man sits on the chair, it shows the Component has been rendered on the website meaning it is visible to us.

Here, when we open our Hashnode Channel, we can see all the components. Various components will load up like Logo, Social media, Navbar, Blogs, and a single Blog component. All these are visible to us which we call as MOUNTING in technical terms. Mounting in simple terms means the birth of a component.


When I click on the latest blog, the screen will update to the respective blog. We can see changes in the URL, TITLE, and CONTENTS OF THE PAGE. This means our component has been UPDATED. Updating can include a change in the state of a component, the addition of certain properties or forcefully updating a component. Updating in simple terms means the growth of a component.


When I come back to my previous page or close a particular web page, the components directly don't get off. They are UNMOUNTED from the web page. The components are first unmounted and then the webpage is closed. Unmounting in simple terms means the death of a component.


render(): Render HTML of the component in React.

componentDidMount(): Executes after the component has been rendered.

componentDidUpdate(): Updates DOM in response to change in state.

componentWillUnmount(): Called just before the component is destroyed.

This visual representation will give you a more clear idea about the React Component LifeCycle.


In the next blog, we shall see "What are Class-Based Components ?". To know more, make sure to watch the video on our Youtube channel. Happy Coding!!

Adios Amigos ๐Ÿ‘‹๐Ÿ‘‹

Subscribe to our newsletter

Read articles from Coding Adda directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Did you find this article valuable?

Support Coding Adda by becoming a sponsor. Any amount is appreciated!

Written by

Coding Adda

Hello Everyone, Presenting you CODING ADDA, We at Coding Adda will help you solve problems in Coding. We at Coding Adda try to clarify the concepts of Coding through short videos and real-life examples. Do support us in our journey. Like, Share and Subscribe to the Channel.

Published on

Coding Adda

Coding Adda

Hello Everyone, Presenting you CODING ADDA, We at Coding Adda will help you solve problems in Coding. We at Coding Adda try to clarify the concepts of Coding through short videos & real-life examples