onClick={() => setCount(count + 1)}がなぜまずいのか。

Reactの状態更新の方法

Reactで状態を更新する方法には、主に以下の2つの書き方があります。

1. onClick={() => setCount(count + 1)}
2. onClick={() => setCount((prevCount) => prevCount + 1)}

それぞれの方法の違いと推奨される使い方について見ていきましょう。

方法1: onClick={() => setCount(count + 1)}

この書き方では、現在のcountの値に1を足した結果をsetCount関数に渡しています。しかし、状態の更新は非同期で行われるため、複数の更新が同時に行われると、古いcount値を使って更新されることがあります。

方法2: onClick={() => setCount((prevCount) => prevCount + 1)}

この書き方では、setCount関数に関数を渡しています。この関数は最新のcount値（prevCount）を引数として受け取り、新しい値を計算して返します。この方法は、最新の状態を使って更新が行われるため、連続した状態更新でも問題ありません。

どっちを使えばいい？

状態の更新が現在の状態に依存する場合や、同時に複数の更新が行われる可能性がある場合は、

onClick={() => setCount((prevCount) => prevCount + 1)}

のように関数を使って状態を更新する方法がおすすめです。これにより、常に最新の状態を使って更新が行われ、予期しないバグを防ぐことができます。