In this blog, we shall see what is the React Component Lifecycle which is used for Components, and how it works.
PermalinkReact Component LifeCycle:
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 :
The man could see the chair.
The man sits on the chair.
The man adjusts himself.
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.
PermalinkMounting:
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.
PermalinkUpdating:
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.
PermalinkUnMounting:
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.
PermalinkLifeCycle Methods:
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.
Written by
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.
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
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
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
Article Series
React Tutorials | ULTIMATE MERN PLAYLIST
Introduction to React and Why React ?
In this blog, we will be introducing the MERN Stack with you and also will be talking about each of โฆ
Recalling JavaScript Concepts for React!!
In this blog, we will be recalling the JavaScript Concepts which every developer should know to starโฆ
Creating Your First React App (HELLO WORLD)
In this blog, we will be creating our first-ever React App and Print Hello World in React. npx creaโฆ
WHAT is JavaScript XML ( JSX )?
In this blog, we shall see what is JSX ? and why is JSX being used extensively in React. What is JSโฆ
Components In React
In this blog, we shall see what are the components in React ? And also see the types of components uโฆ
React Component LifeCycle
In this blog, we shall see what is the React Component Lifecycle which is used for Components, and hโฆ
Class-Based Components
In this blog, we shall see what are Class Based Components, how they are created and the merits and โฆ
Function Based Components
In this blog, we shall see what are Functional Components, how they are created and the merits and dโฆ
Implementing CSS in React!!
In this blog, we shall see what is CSS in React, What are the approaches of using CSS in React, How โฆ
Fetching Data from API in React!!
What is an API? An API, short for Application Programming Interface, is a set of rules, protocols, aโฆ
Creating Weather App with ReactJS!! Part-1
In this blog, we will be creating Weather app using ReactJS and TailwindCSS. Project Overview Beforโฆ
Creating Weather App with ReactJS!! Part-2
In this blog, we will be completing the weather app which we started in the previous blog in our Reaโฆ
Props in ReactJS!!!!
In this blog, we will learn all about Props in ReactJS. What are Props? In React, "props" is an abbโฆ
React Hooks Demystified ๐ฅ๐ฅ
In this blog, we will see about Hooks in ReactJS. What is React Hook? React Hooks are a set of funcโฆ
UseState Hook in ReactJS๐ฅ๐ฅ
In this blog we will be seeing everything about useState Hook in ReactJs State Management State manโฆ
UseEffect Hook in ReactJS๐ฅ๐ฅ
In this blog we will be seeing everything about useEffect Hook in ReactJs. UseEffect Hook The useEfโฆ
UseRef Hook in ReactJS๐ฅ๐ฅ
In this blog, we will be seeing everything about UseRef Hook in ReactJs. What is useRef Hook? useReโฆ
UseMemo Hook in ReactJS๐ฅ๐ฅ
In this blog, we will be seeing everything about UseMemo Hook in ReactJs. What is useMemo Hook? Theโฆ
Create your own Custom Hook in ReactJS๐ฅ๐ฅ
In this blog, we will be seeing everything about Custom Hook in ReactJs. What are Custom Hooks in Rโฆ
React Router DOM๐ฅ๐ฅ
In this blog, we will be seeing everything about React Router DOM. What is React Router DOM? React โฆ