React 19 + Jotaiを試して気づいた注意点

React 19 + Jotaiを試して気づいた注意点 2024-12-15 Shinyai.js #1 uhyo

これまでのあらすじ React 19が12月にリリースされた。 Jotaiは現状最高の状態管理ライブラリだ。（個人の感想です） 2

React 19 + Jotai Jotaiを使うステート管理アーキテクチャが React 19でどんな感じになるのか試してみた。 3

今回作るアプリ都道府県のチェックボックスがあり、選択した都道府県の人口の合計と平均が表示される。（データは非同期処理で読み込まれる） 4 https://github.com/uhyo/react-19-jotai-sample

ステート設計①: データ取得 5

ステート設計②: チェック状態生のステートはSet<string> | undefinedとし、別のatomでundefinedを全チェックに変換する 6

ステート設計③: チェックの変更 write関数のシグネチャを好きにできるため、 write-only atomに更新ロジックを載せるのが Jotai wayらしい。 7

ステート設計④: データ処理普通にderived atomで表示データを計算すればいい。 8

Jotai v2所感 Jotai v2では非同期atomの値の型はPromiseになる。 derived atomもその影響を受けて非同期になる。 async関数みたいな感じなので分かりやすくはある。 9

デモ1 現状はリポジトリのstep1タグの状態。 Suspenseを使っているが、チェックを変えるたびにローディングが挟まる。チェック側のサスペンドは一瞬で終わるはずだが、 FALLBACK_THROTTLE_MS (=== 300) という謎の設定により0.3秒待たされている。
10

注意点実は、0.3秒待たされるのはReact 18 → 19で変化した、React 19に特有の挙動！ React 18では、一瞬サスペンドが入る（ちらつく）が、0.3秒待たされることはない。
React 19に何気なく上げたらUIのレスポンスが悪化する可能性もあるので気を付けよう。 11

注意点とはいえ、React 18の時点でちょっとちらつく良くない挙動になっていたので、それを放置せずにちゃんと直していたのであれば、 React 19に上げても大丈夫だろう。 12

分析 ReactはUIライブラリとして、ユーザー入力に対して最速でフィードバックを返すことに注力している。なのに無駄に300ミリ秒も待たされるのは不自然。ユーザー入力と認識されていないかも？ 13

分析ここで、setの前にawaitを挟んでいるのが良くないかも？ awaitを無くしたい。 14

分析 setの前にawaitが必要なのは、undefinedを「全部」に変換しているから。 15

方針ステート設計を変更して、「チェックされていない要素の集合」を持つようにする。そうすれば、初期状態を new Set()にできる。 16

修正結果このように、ステート更新時にawaitが必要なくなった。 17

デモ2 現状はリポジトリのstep2タグの状態。目論見通り、チェックの表示がサスペンドしなくなった！ 18

教訓 Jotai v2 (2023年1月リリース)ではatomにPromiseを保存する設計になっているため、カジュアルに「setの前にawait」しがちである。 React 19ではこのやり方が思わぬ悪影響に繋がることもあるため、ステート設計に注意が必要。
19

とはいえステート設計が歪んでしまうので、Jotai側でいい感じに対応できるのであれば嬉しい。何かないか引き続き検証したい。（下記の記事を参考に即座にPromiseをatomにsetする実装にしてみたがそれではだめだった……） https://blog.axlight.com/posts/how-to-use-jotai-and-use-transition-for- mutation/ 20

21 完

22 完

こちらも合わせてご覧くださいこのスライド公開後に有識者と議論した結果、より良い方法があったのでこちらも参照してください。 23 https://zenn.dev/uhyo/articles/jotai-v2-async-sometimes

React 19 + Jotaiを試して気づいた注意点

React 19 + Jotaiを試して気づいた注意点

uhyo

More Decks by uhyo

Featured

Transcript