"use client";
import { useState } from "react";
function expensive(n) {
// Deliberately slow work, to make compiler-driven memoization observable.
let acc = 0;
for (let i = 0; i < 5_000_000; i++) {
acc += Math.sqrt(i + n);
}
return acc.toFixed(2);
}
function Stat({ value }) {
// React Compiler memoizes this component automatically — `expensive(value)`
// only runs when `value` changes, not on every parent re-render.
const result = expensive(value);
return (
<p>
<strong>Computed:</strong> sqrt-sum for <code>{value}</code> = {result}
</p>
);
}
export default function Counter() {
const [count, setCount] = useState(0);
const [tick, setTick] = useState(0);
return (
<section>
<p>
<button onClick={() => setCount((c) => c + 1)}>
increment count ({count})
</button>
<button onClick={() => setTick((t) => t + 1)}>
re-render parent ({tick})
</button>
</p>
<Stat value={count} />
</section>
);
}