Why Mounting phase in React? - Purpose & Use Cases

The Big Idea

What if your app could prepare itself perfectly every time a new screen shows up, without you lifting a finger?

The Scenario

Imagine you want to show a welcome message only when a user first opens a page, and you have to manually add and remove HTML elements every time the page loads.

The Problem

Manually adding and removing elements is slow, easy to forget, and can cause bugs like showing messages multiple times or not at all.

The Solution

The mounting phase in React automatically runs code when a component appears on the screen, so you can set up things like messages or data loading without extra hassle.

Before vs After

✗ Before

document.body.innerHTML += '<p>Welcome!</p>' // run on page load

✓ After

useEffect(() => { console.log('Component mounted'); }, [])

What It Enables

You can run setup code exactly once when a component appears, making your app more reliable and easier to manage.

Real Life Example

Showing a welcome popup only once when a user visits a site, without repeating it on every action.

Key Takeaways

The mounting phase runs code when a component first appears.

It helps automate setup tasks like fetching data or showing messages.

This avoids manual, error-prone DOM changes.