# 📘 React Mastery Series — Day 1

## How React Works & Why UI Re-renders When State Changes

When I started learning React, one question confused me a lot:

👉 *Why does the UI update automatically when a state changes?*

Understanding this is the **foundation of React**.  
Once you get this right, hooks, performance, and debugging become much easier.

Let’s break it down simply:

---

## ⚛️ How React Works (Simple Explanation)

React builds your UI using **components**.

Each component:

• Has state (data)  
• Returns JSX (UI)  
• Re-renders when state or props change

Think of it like:

> State changes → React updates UI automatically

---

## 🔁 What is Re-rendering in React?

Re-rendering means:

👉 React runs your component function again and updates only the changed parts of the UI.

Important point:

✅ React does NOT reload the whole page  
✅ It only updates what changed (Virtual DOM magic)

---

## 📌 Simple Example

```plaintext
import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increase
      </button>
    </div>
  );
}
```

### What happens here?

1️⃣ Button clicked  
2️⃣ State updates  
3️⃣ React re-renders component  
4️⃣ UI updates automatically

---

## 🧠 Why React Uses Re-rendering

React re-renders to:

✔ Keep UI in sync with data  
✔ Improve performance  
✔ Avoid manual DOM updates

This is why React apps feel fast and smooth.

---

## ❗ Common Beginner Mistake

Changing normal variables won’t update UI:

```plaintext
let count = 0; // ❌ wrong for UI updates
```

Always use state:

```plaintext
const [count, setCount] = useState(0); // ✅ correct
```

---

## ✅ Key Takeaways

✔ React UI depends on state & props  
✔ State change triggers re-render  
✔ React updates only what changed  
✔ No full page refresh

---

## 🚀 What’s Next in This Series?

(Day 2):  
👉 Deep dive into `useState` with real examples

---

💬 Have you ever wondered why React re-renders components? Let me know in comments!

**Thank you for reading! 🙌**

---