← Hooked.
useState
公式ドキュメント ↗const [count, setCount] = useState(0);
<button onClick={() => setCount(c => c - 1)}>-1</button>
<span>{count}</span>
<button onClick={() => setCount(c => c + 1)}>+1</button>何度呼んでも、描き直しはまとめて1回になる
setTimeout(() => {
setCount((c) => c + 1);
setCount((c) => c + 1);
setCount((c) => c + 1);
}, 0);
// React 18以降は、これでも画面が描き直されるのは1回だけ描き直しは軽くない処理。だからReactは、同時に起きた複数のsetStateをまとめて1回の描き直しに圧縮してくれる(バッチング)。
クリックした瞬間の値を、そのまま覚えてしまうことがある
// 左: クリックした瞬間のcountを覚えてしまう
const captured = count;
setTimeout(() => setCount(captured + 1), 800);
// 右: 実行される瞬間の最新値を使う
setTimeout(() => setCount((c) => c + 1), 800);両方のボタンを0.8秒以内に3回連打すると違いが分かる。「クリックした瞬間のcount」はそのボタンが表示されていた時点の値のまま固定される(クロージャ)。setCount(c => c + 1)のように関数で渡せば、実行される瞬間の最新値をReactが渡してくれる。