【React】1度だけ変更されるstateにはuseStateよりuseReducerを使う方が最適

useStateでしょ！ という声が聞こえてきますね。
おっしゃる通りなんですが、それよりも実はそういう時はuseReducerの方がより適しているという話です。

はじめましてスペースマーケットでフロントエンドエンジニア兼リーダーをしています。

はじめに

useState / useReducerがなんぞや？という方は公式のリファレンスをご確認ください。

https://ja.reactjs.org/docs/hooks-reference.html#usestate

https://ja.reactjs.org/docs/hooks-reference.html#usereducer

1度だけ変更されるstateでいうと下記のようなイメージでしょうか？

const Hoge: FC = () => {
  const [finished, setFinished] = useState(false)
  const onClick = () => {
    setFinished(true)
  }

  if (finished) return <div>送信しました！</div>
  return (
    <div>
      <button onClick={onClick}>送信する</button>
    </div>
  )
}

例えば問い合わせ画面のような画面があり、送信ボタンを押すと問い合わせの画面が完了画面へ切り替わるようなイメージです。
今回はフォームなどなど諸々を省略していますがご容赦ください。

これをuseReducerで書き直してみます。

const Hoge: FC = () => {
  const [finished, updateFinished] = useReducer(() => true, false)
  const onClick = () => {
    updateFinished()
  }

  if (finished) return <div>送信しました！</div>
  return (
    <div>
      <button onClick={onClick}>送信する</button>
    </div>
  )
}

このようになります。
このようにすることで次のメリットが生まれます。

useReducerはstateの再更新をしないことを明示できる

結局これにつきます。
もう一度コードをみてください。

const [finished, setFinished] = useState(false)

本来この画面では「送信するを押したら完了表示になり元の画面へ切り替わらない」ことが正しいです。
しかしfinishedはこの画面の要件を満たせていません。
useStateを使う場合、finishedの値はsetFinishedの実行結果によって更新されます。
今回はかなり小さな構成であり、早々このような事が起きないと思います。
もっと複雑な構成である場合、意図しないタイミングでsetFinishedが実行されることでバグを埋め込む可能性があります。
そのような可能性が生まれないようにしておければそれに越したことはありません。

上記のような場合に使うべきがuseReducerです。

const [finished, updateFinished] = useReducer(() => true, false)

useReducerを使ったupdateFinishedを実行するとfinishedのstateはtrueへ更新されます。
useStateと異なる点は、 updateFinishedを何度実行してもfinishedはtrueにしかなりません。
もう一度falseに戻ることがないので、「このstateは再更新されることはない」ということを明示できます。
これで誤った実装によるバグが生まれる可能性がなくなります。

おわりに

とてもシンプルな話ですが、とりあえず仕様を満たせばいいわけではなくコードでいかに仕様を表現するか大事だと思います。
みなさんのプロダクトでも是非こちら活用してみてください！