Q13- What causes a React component to re-render? How can you optimize it?

A React component re-renders whenever something it depends on changes.

The main reasons are 👇

1. State changes — Whenever you call setState or update a state variable.
2. Props change — If the parent passes new props (even if values are the same but reference changes).
3. Context changes — If the component uses a context value and that value updates.
4. Parent re-renders — Children often re-render when the parent re-renders.

---

🧠 Example:

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

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

Every time setCount runs, the component re-renders with the new state.

---

⚡ How to Optimize Re-renders:

1. Use React.memo — Prevents unnecessary re-renders if props haven’t changed.

const Child = React.memo(function Child({ value }) {
  console.log("Child re-rendered");
  return <div>{value}</div>;
});

1. Use useCallback and useMemo — Keeps function and computed values stable across renders.
2. Avoid unnecessary state — Only keep what’s needed in state; derived values can be computed.
3. Split large components — Smaller components are easier to control and optimize.
4. Use proper key props — Helps React reuse elements instead of re-rendering the entire list.

---

✅ In short:
React re-renders when state, props, or context changes.
You can optimize it using React.memo, useCallback, useMemo, and by keeping components clean and focused.