How do moving state down and passing content as children avoid re-renders without memo?

function ShopPage() {
  const [email, setEmail] = useState("");
  const [fontSize, setFontSize] = useState(16);
  return (
    <div style={{ fontSize }}>
      <button onClick={() => setFontSize(fontSize + 2)}>Larger</button>
      <ProductGrid /> {/* slow */}
      <input value={email} onChange={(e) => setEmail(e.target.value)} />
    </div>
  );
}