React の state の仕様ってどう思いますか？？

テーマ、知りたいこと

React の useState って常に Setter が必要になるのは仕方ないのでしょうか？だとしたら Vue 系と比較した際に少々面倒では無いでしょうか？

普段自分は vue/nuxt を使うことが多く react/next などに関しては知識が乏しいので間違っていたらご教示いただけますと幸いです。

例えば Vue3系なら以下のように記述できるかと思いますが

ts
1const count = ref<Number>(0)
2
3count.value = count.value + 1

React なら以下とかですかね？

ts
1  const [count, setCount] = useState<Number>(0)
2
3  setCount(count + 1)

一つならまだしも複数だったりオブジェクトだったりするとまた記述量が一気に増えませんか？

例えば Java などでも setter getter の省略をしてくれる lombok は必須だったりしますが、やはり setter などを常に記述しなければならないというのはそうでない言語や FW を使っていると面倒に感じてしまうのですがまず常に上記のように setter を一緒に宣言しないといけないというのは合っていますか？
もしそうであればこのように setter を常に一緒に用意する必要がありかつそれを java の lombok のように省略する術も無いことは不便では無いでしょうか？？

回答5件

maisumakun

総合スコア145436

投稿2024/04/30 13:57

一つならまだしも複数だったりオブジェクトだったりするとまた記述量が一気に増えませんか？

複雑な更新が必要な場合は、更新のロジック自体をreducerへ追い出してしまう手段があります。

reducerは以前のstateと変更内容を受け取り、新しいstateを返すだけの単なる関数であるため、テストもやりやすいです。

honey32

総合スコア202

投稿2024/05/01 10:36

Vue には習熟していないので詳しくはないですが、

Vue は、ref, reactive で用意した 一つ一つの小さなミュータブルなオブジェクトをミューテートする ことで画面が更新される
React は 裏側にある React のシステムに、再レンダリングを要求する ことで画面が更新される

という違いがあり、これが count.value = newValue と setCount(newValue) という表面的な API の違いに表れているのだと思います。

一つならまだしも複数だったりオブジェクトだったりするとまた記述量が一気に増えませんか？

たしかに、複雑なオブジェクト (配列が絡んで、階層が2段にも3段にもなっている) とかだと Immer に頼る必要があるくらい大変です。

ただ、記述量が増える原因のほとんどは、ステートの置き方や親子の連携が適切でない ことです。そのようなコードになってしまうことと比べれば、setCount(newValue) と書かねばならないことによる煩雑さは微々たるものだと思います。

(注) ステートの置き方や親子の連携が適切でない……たとえば、const derivedValue = fn(baseValue) で済むところに useState と useEffect を使ってしまうとか、「イベントハンドラは子から親に伝播する」原則に従わないとか…

ちなみに、 React では、 v19 で Server Actions / Client Actions という機能が追加される予定です。「バックエンドにリクエストを投げて、レスポンスが返ってくるまで待つ」という処理を抽象化してくれる機能です。 React はこのように決まり切った処理をうまく共通化・抽象化してくれるので、うまく乗っかれば必要なステートは少なくなります。

GPTeacher

総合スコア1

投稿2024/05/08 01:33

React の useState 使うたびに、ステートの値（count）とそれを変える関数（setCount）が必要やねんな。これ、Vue と比べたら、ちょっと書くの面倒やろうとは思うわ。React と Vue で内部でステート更新の処理が違うからやで。

React の useState フック

React で useState 使うときは、ステートの値とその更新関数の両方を取り扱うで。このやり方のええところは、React がステート更新をちゃんと制御できるってことや。ステートの更新は非同期でまとめて処理されるから、パフォーマンスも上がるんや。

javascript
1const [count, setCount] = useState(0);
2
3setCount(count + 1);

Vue のリアクティブシステム

Vue では、ref とか使って、直接ステートを更新できるんや。Vue 3 で Composition API 使うと、もっと直接的にリアクティブなデータいじれるようになってるんやで。

javascript
1const count = ref(0);
2
3count.value++;

比較と違い

シンプルさ: Vue は値を直接更新できるから、コードがシンプルになる。React は更新関数使ってステートを変えなあかん。
パフォーマンスと最適化: React の useState は更新関数を使ってステートを変えることで、ステート変更が予測可能になって管理しやすい。Vue はリアクティブなプロキシを通して直接ステート変えるから、自動的に内部トラッキングが行われるんや。

総括

React で useState 使うたびに setter 関数が要るのは、Vue みたいに直接値を変えられるフレームワークと比べたら面倒かもしれへんけど、これにはステート更新の意図をはっきりさせる、というメリットもあるんや。React は useState の他にも useReducer みたいなもっと複雑なステートロジックに対応するフックもあるで。Vue のように直接ステートを更新する方法は提供してへんけど、それぞれのやり方にはメリットとデメリットがあるから、使うフレームワークやアプリの要件によってえらぶのが大事やで。