$30 off During Our Annual Pro Sale. View Details »

ステート管理を超えるRecoil運用の考え方

uhyo
January 20, 2023

 ステート管理を超えるRecoil運用の考え方

Harajuku.ts Meetup 〜 Recoilの事例集めました〜

uhyo

January 20, 2023
Tweet

More Decks by uhyo

Other Decks in Technology

Transcript

  1. 事前アンケート結果 参加者の皆さんにアンケートに答えていただきました。 RecoilとJotaiのどちらがお好きですか? Recoil 142 わから ない 202 Jotai 29

    Recoilが優勢だが、浮動票が多くJotaiも 巻き返しのチャンス。 ※本イベントはRecoilをテーマにしていますが、 Jotaiもかなり似たライブラリですので、 Jotai派の方は脳内変換しながらお聞きください。
  2. 事の発端 公式サイトによれば、Reactは “A JavaScript library for building user interfaces” である。

    ということは、UIを構築する以外の仕事をさせないほうが筋が いいのでは? UI以外のことはReactから切り離したい。
  3. atomとselectorの使い分け 他に従属しない状態がatom。それ以外は何が何でもselectorに する。 例: 検索画面 • 検索条件: atom (ユーザーが独立に変更できるため) •

    ページ数: atom (ユーザーが独立に変更できるため) • 検索結果: selector (上2つ(+サーバーの状態)から計算できるため) ※ページングがカーソルベースだった場合はすこし迷うが、サーバーから可能な 選択肢を取得してそのなかから選んだと考えてカーソルをatomに保存するか
  4. 具体例 React層 検索 条件 ページ 数 検索 結果 useSearchResult useSearchQuery

    usePagination atomから始まるデータの流れが RecoilのAPIを用いて定義される。 (データフローグラフ)
  5. 具体例 React層 検索 条件 ページ 数 検索 結果 useSearchResult useSearchQuery

    usePagination React層からの入力は基本的にコア 状態の変更として作用するので、 入力用フックを介してコア状態を 更新する。 グローバルなアクションといった 概念は存在せず、ユースケースに 応じた個別の入力用フックがある。 入力用フックもコア層の一部と して扱うのが筋良さそう
  6. 具体例 React層 検索 条件 ページ 数 検索 結果 useSearchResult useSearchQuery

    usePagination Reactコンポーネントツリーの 上から下にデータが流れる様子に 似ているが、 Recoilを使う場合はReactに入る前 に計算が終わっているという 点が異なる。
  7. Reactにロジックを乗せると良くない点 ReactにUI以外のことを無理にやらせると、アプリケーションの 整合性を保つのが困難になる。 例: Reactでやる場合 const [検索条件] = useState(); useEffect(()

    => { 検索結果取得(); }, [検索条件]); 検索条件変更 ↓ レンダリング ↓ useEffect発火 ↓ 検索結果取得開始 ↓ … 検索条件が変わったのに 検索結果が前のままと いう中途半端な状態が レンダリングされて しまっている