The Lifecycle of a React Component: From Birth to Death

To understand React component lifecycle, first we need to understand what react components are.React components are reusable UI units that handle their own logic, accept data through props, manage state, and efficiently update only the parts of the UI that change.

So a component lifecycle basically describes the different phases a component goes through. The three main phases are mounting, updating and unmounting.

• Mounting: the mounting phase takes place when a component is initialized the first time and all the code in the function is executed. All states are set to initial state and variables and memos are initialized.React computes the JSX, updates the Virtual DOM, compares it to the actual DOM, and then the browser “paints” the screen for the user
• Updating: The Updating phase is triggered whenever there is a change in a component’s state or props,due to any interaction with user. The UI is updated in the virtual DOM by managing the components accordingly and re-rendering them, after which the difference between the new virtual DOM and previous one is seen and only the updated components are changed.

Trigger → Re-render → Diff → Patch

• Unmounting: it happens when a component is no longer needed. React releases all associated values (state, variables) from memory. It executes any remaining cleanup functions in useEffect to prevent memory leaks.

Some Important Terms:

• JSX: JSX stands for JavaScript XML. It is a syntax extension for JavaScript that allows you to write HTML-like markup directly inside your JavaScript files. While it looks like HTML, it is actually a powerful shorthand for creating React elements.
• Real DOM: The Real DOM is the browser’s internal map of your webpage. It represents the UI as a tree structure where every HTML tag is a “node.” When you change a piece of data (like updating a score in a game), the browser has to recalculate the CSS, re-layout the page, and re-paint the screen.
• Virtual DOM: The Virtual DOM is a lightweight copy of the Real DOM. It’s essentially a giant JavaScript object that lives in the computer’s memory. When a component’s state changes, React doesn’t touch the browser yet. Instead, it creates a brand new Virtual DOM tree representing what the UI should look like now. Because it’s just a JavaScript object, creating and destroying these trees is incredibly fast.
• State: In the context of React, State is a built-in object that allows a component to “remember” information. If props are like “instructions” passed down from a parent, state is the component’s private, internal memory.
• Props: Props are inputs passed from a Parent component to a Child component. They allow components to be reusable. Instead of making ten different “Button” components, you make one Button and pass different props (like text, color, or size) to customize it.

Why is the component lifecycle important?

• Lifecycle methods help to acquire data and refresh external assets at the optimal moment.
• By understanding the lifecycle, you can stop React from doing extra work. You can make sure it only updates the screen when it absolutely has to.
• Avoid memory leaks by terminating timers, requests, and listeners.
• Ensures that all resources are properly released when a component is taken out of the UI ensuring clean unmounting.