フロで管理したいならuseStateの代わりに使うのがいいかもしれません。管理する状態が多い場合はこちらを使うと処理を外部に切り分けられコードが見やすくなるのでお勧めします。このフックは2-3の引数を受け取ります。初期値、3つ目はオプショナルで2つ目の初期値が複雑な場合、それを更に弄る為の関数です。アクションを流すための関数を返します。);};useReducerには上記の説明のように(ここでは無理やり)3つの引数を渡してます。initialStateではcountは0としてますが、init関数により0から9のどれかに書き換えられます。アクションを発行する関数はuseCallbackで囲みます。使った更新ではdispatch関数は毎回変更が入ってしまい毎回アクション関数を新しく作ることになってしまいますが、依存しないpropsの更新が来た時などにはそれを防げる為です。今回はpropsがありませんが、そういった場合でも癖として常にやっておいたほうがいいかなと思います。<button>をクリックするとcountReducerへアクションが飛びます。countReducerではそのアクションのtypeを見て捌きます。switch構文で捌くことが多いですが、if構文などでも構いません。countReducerの戻り値が次のuseReducerの戻り値のstateへやってきます。その値でコンポーネントが再描画される...という動作を繰り返します。