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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

21 完

Slide 22

Slide 22 text

22 完

Slide 23

Slide 23 text

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