How does React handle re-renders, and how can you optimize unnecessary renders?

React re-renders a component whenever its state or props change.
However, unnecessary re-renders can slow down performance if not managed carefully.

---

⚙️ Example of Unnecessary Renders

function Parent({ count }) {
  return (
    <>
      <Child />
      <span>{count}</span>
    </>
  );
}

const Child = () => {
  console.log('Rendered');
  return <div>Child</div>;
};

Even if Child doesn’t depend on count, it re-renders every time.

✅ Optimize using React.memo:

const Child = React.memo(() => <div>Child</div>);

💡 Optimization Tips

1. Use React.memo for pure components.
2. Use useCallback and useMemo to prevent prop reference changes.
3. Keep component trees shallow.
4. Avoid anonymous inline functions when possible.