Real World Example

When you click "Add to cart", the cart count in the header updates instantly without reloading. With plain JavaScript you would update every place by hand; in React the header and the product card both read the same state.

function App() {
  const [cart, setCart] = useState([]);
  return (
    <>
      <Header cartCount={cart.length} />
      <ProductCard product={phone} onAdd={(p) => setCart([...cart, p])} />
    </>
  );
}