A Beginner’s Guide to Understanding React Component Lifecycle

Okay, imagine React is like a toolbox for building websites. It has a unique way of organizing how different parts of your website work together. If you’re just starting with React, it’s important to understand this process. So, in simple terms, I’m going to explain how React manages these parts and how you can use them effectively in your website projects.

In this blog, I’ll take you through the basics of React component lifecycles and I’ll show you how it is used effectively in your applications with some examples. now you can ask me what is a React Component!

What is a React Component?

Alright, let’s talk about what a React Component is. In React, think of everything you see on a webpage as small building blocks called components. These components can be as basic as a button or as complicated as a whole webpage itself. So, in React, pretty much everything you see is made up of these component building blocks.

The Three Main Phases

When we’re working with React components, they go through three important phases in their life: Mounting(creation phase), Updating, and Unmounting. Now, let’s take a closer look at what happens in each of these phases.

1. Mounting (Creation🏫 ):

Imagine you’re building a house. You start with an empty plot of land, and then you go through a series of steps to create your dream home. In React, there is something similar called the “Mounting” phase, where we build and set up our components. Let’s explore this phase step by step

Constructor :-

• Think of the constructor as the blueprint for your house. It’s the very first step in creating your component. Here, you set up the initial plans and features for your component. It’s like deciding how many rooms in your house will have and what color te walls will be.

render():

• Now that you have your blueprint (constructor), it’s time to actually build your house. The “render()” function is where you create the visual part of your component. Just like you put walls, windows, and doors in your house, “render()” assembles the elements that you want to show on the screen. It’s important to note that “render()” doesn’t change anything about your component itself; it just creates the look and feel.

componentDidMount():

• Okay now your house is completed, and you’re ready to move in. But before you do, you might want to add some furniture or decorations to make it feel like home. “componentDidMount()” is where you can do that. After your component is built and shown on the screen, this function is called. It’s like the moment you move into your new house and start making it comfortable by adding personal touches. You can use this function to do things like fetching data from the internet or interacting with outside the world.

2. Updating🤌(Changing what’s already there):

Imagine your program is running, and it’s doing some tasks on the web page. But sometimes, it needs to change what it’s doing because something new happened or it needs to show different information. This is like when your program updates itself. It can happen many times while the program is running.

So here are two examples for you to understand the “Update Phase” in React:

Example 1: Chat Application In a chat application like instagram , when someone sends you a new message, it appears in the chat window without you having to refresh the whole page. This is because React is in the “Update Phase.” It’s updating the chat window to show the new message.

Example 2: Weather App If you have a weather app that displays the weather for your location, React will be in the “Update Phase” when the weather data changes. For example, if the temperature changes from 70°F to 75°F, React updates the temperature on the screen to reflect the new information.

3. Unmounting (removing nodes from the DOM):

Okay, let’s talk about the last phase called ‘Unmounting.’ Imagine you have a collection of toys in your room, and each toy represents a different part of your web application. Now, think of React components as these toys, and the “Unmount” phase as the process of putting a toy away when you’re done playing with it.

• This happens either because you’ve finished with that part of your web app or you’ve moved to a different section.
• Think of it as keeping your web app organized, like cleaning up and putting away toys after playing.

Let’s understand with one example…

Think of your web app like a library. You have a “Books” section and a “Movies” section. When you open the app, you’re in the “Books” section, and you can see all the available books.
Now, if you decide to switch to the “Movies” section to browse films, React does something smart. It “unmounts” or removes the “Books” section from the screen. Why? Because you don’t need to see the book list when you’re looking for movies. This keeps your app clean and quick. When you want to go back to the “Books” section, React “mounts” it again so you can see the books once more.
It’s similar to closing your computer’s music player when you’re not listening to songs and reopening it when you want to play music again

Conclusion

To Understanding the React Component Lifecycle is essential for building robust and efficient React applications. It allows you to manage your components effectively, ensuring they behave as expected throughout their lifecycle. As you continue your journey in React development, mastering these lifecycles will become second nature, enabling you to create powerful and dynamic user interfaces