Why should you avoid storing redundant or derived data in React state?

Direct answer

If a value can be calculated from current props or state during render, storing another copy usually creates synchronization bugs and unnecessary updates.

Cart.jsx

function Cart({ items }) {
  // Prefer deriving this during render:
  const total = items.reduce((sum, item) => sum + item.price, 0);

  return <strong>Total: {total}</strong>;
}

Two state variables that represent the same underlying fact can drift apart. A useful rule is to store the minimal source of truth and derive the rest during rendering.