📘 React Mastery Series — Day 7

How React Rendering Works & Performance Basics (Beginner Friendly)

Many developers use React daily but don’t fully understand:

👉 When does React re-render?
👉 Why does UI update automatically?
👉 How to avoid unnecessary renders?

Let’s understand this clearly and simply.

---

🔄 What is Rendering in React?

Rendering means:

👉 React runs your component function and updates the UI.

React renders when:

✅ State changes
✅ Props change
✅ Parent component re-renders

---

📌 Simple Example

import { useState } from "react";

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

  console.log("Rendered");

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

👉 Every click triggers re-render.

---

⚡ Does React reload the whole page?

❌ No!

React uses Virtual DOM:

• Compares old UI with new UI
• Updates only changed parts

This makes React fast.

---

🚫 Common Cause of Unnecessary Renders

setCount(count); // causes render even if value same

Better:

setCount(prev => prev);

(React may skip if no change)

---

🎯 Performance Tip #1 — Keep state minimal

Don’t store values that can be derived.

Bad ❌

const [fullName, setFullName] = useState(first + last);

Good ✅

const fullName = first + last;

---

🚀 Performance Tip #2 — Use React.memo (quick intro)

const Child = React.memo(({ name }) => {
  console.log("Child rendered");
  return <p>{name}</p>;
});

👉 Prevents re-render if props don’t change.

---

⚠ Important Truth

React re-rendering is NORMAL and FAST.
Only optimize when you see performance issues.

---

✅ Key Takeaways

✔ React re-renders on state/props change
✔ Virtual DOM updates efficiently
✔ Keep state minimal
✔ Optimize only when needed

---

🔜 Coming Next in Series

Day 8 — Lifting State Up & Component Communication

(Real project pattern!)

---

💬 Did you know parent re-renders affect children?

Thank you for reading! 🙌