What is Lifecycle in React?

Let’s say you have components — X, Y, and Z. React takes these components and turns them into JSX. These JSX expressions ultimately produce what the user sees in the browser.

But what happens between writing JSX and seeing output on the screen?

That’s what we call the React Lifecycle — the journey a component goes through from start to end.

1. Mount Phase (Initial Render)

This is when a component first appears on the screen.

🔹 What Happens:

1. React mounts the component — meaning it runs the entire function body of the component.
2. It initializes all variables and hooks(useState, useMemo,Constants (const, let, var)
3. JSX is returned.
4. React passes this JSX to the Virtual DOM — a copy of the actual DOM that exists in memory.
5. The Virtual DOM acts like a middleware — it checks for differences (diffing) between itself and the actual DOM.
6. Once differences are found, it updates the Real DOM (what the user sees in the browser).
7. The user finally sees the output on the screen.

🔸 After that:

• If there’s asynchronous code (like inside useEffect), React schedules it to run after the component has been rendered in the browser.
• So effects like data fetching or event listeners happen after the browser shows the component.

✅ useEffect(() => { ... }, []) runs after the component is mounted.

# Between Two Renders

Very Important:
Before running the next render, React will check if you have a useEffect with a cleanup function, and it will run that cleanup first.

2. Update Phase (Re-render)

Once the component is on the screen, it may need to update

🔹 What Triggers an Update:

• A user interaction
• A change in props
• A change in state
• Timers, API calls, etc.

🔹 What Happens:

1. React re-runs the component function — same as in the mount phase.
2. It recomputes values, updates state, and checks if any state or props changed.
3. JSX is returned again.
4. Virtual DOM compares the new JSX with the previous version and figures out what changed.
5. React updates only the changed parts in the Real DOM (efficient rendering).
6. Browser reflects the updated UI.

🔸 In between renders:

• Cleanup functions (from useEffect if you have define clean up function) are run before the next render.
• After the update, any scheduled hooks or async code run again.

✅ Think of update phase as: Re-run → Diff → Update DOM → Re-run useEffect → Cleanup if needed

3. Unmount Phase (Exit)

This phase occurs when a component is removed from the screen — for example, when a user navigates away or the component is no longer needed.

🔹 What Happens:

1. React releases all values from memory (useState, useMemo,Variables like const, let, etc)
2. If you have a cleanup function in useEffect, it runs now.
3. Virtual DOM prepares the change.
4. React removes the component from the Real DOM.
5. Browser no longer shows it.

✅ useEffect(() => { return () => { ... } }, []) handles cleanup on unmount.

🌐 Server-Side Lifecycle (SSR in React)

Until now, we talked about React on the client-side (i.e., the browser).
But there’s also server-side rendering (SSR), like in Next.js or custom setups.

🔹 What Happens on the Server:

1. No hooks like useEffect or useState run on the server.
2. React just returns JSX, which is converted to HTML.
3. This HTML is sent to the browser.
4. Browser displays the content faster because it’s already rendered.

⚠️ There is no hooks like useEffect on the server.
That’s why server-side components are faster, but you lose dynamic behavior during initial load.

🔸 Bonus Details:

• Server components can be async.
• You can perform tasks like:
• Fetching data from a database
• Calling APIs
• Running server-side logic

🔁 What if data changes on the server?

If data changes on the server, a server-side function will be triggered again. That function will:

1. Fetch or reprocess the updated data
2. Generate new JSX with the updated data
3. JSX is then converted to HTML again
4. The new HTML is sent to the client/browser

✅ This is like “re-rendering” on the server, but not the same as client-side re-renders — it’s regenerating the page HTML based on fresh data.

⚠️ Reminder:

• On the server, there is no lifecycle like useEffect.
• But we can respond to data changes by re-running the server function, which returns fresh JSX → HTML.