Q187- What does re-rendering mean in React?

Re-rendering in React means that a component’s render function is called again to update the UI when its state or props change.

---

⚙️ How it Works:

1. When a component’s state or props change → React triggers a re-render.
2. React calls the component function again (for functional components).
3. It generates a new virtual DOM tree.
4. React’s reconciliation process compares the new virtual DOM with the previous one (diffing).
5. Only the changed parts of the real DOM are updated efficiently.

---

💡 Example:

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

  console.log("Component re-rendered");

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

Every time you click the button:

• setCount updates the state
• React re-renders the component
• The UI updates to show the new count

---

✅ In Short:

Re-rendering is React’s way of refreshing the UI when data changes —
it doesn’t reload the whole page, just updates the affected parts efficiently.