Recoilを剥がしている話

by kirik

Slide 1

Slide 1 text

Recoilを剥がしている話 3社合同フロントエンド合同勉強会 2024/12/10 株式会社PR TIMES @kiririLee

Slide 2

Slide 2 text

・アプリケーションの状況・なぜ剥がしているのか・何に移行しているのか・進め方・遭遇したパターンと反省点・現状の進捗とつらみ

Slide 3

Slide 3 text

現状のアプリケーションの状況・React, Next.jsで構築されたプロジェクトでRecoilに　依存しているプロジェクト数は15 ・フロントエンドチームとしてRecoilの利用方針、設計方針などは　なくプロジェクトによって使い方や依存の仕方がバラバラ　Global State以外にも非同期処理、localStorageと　Reactの同期にも使用されている

Slide 4

Slide 4 text

なぜ剥がしているのか 🤔

Slide 5

Slide 5 text

・React 19で動かない・2023/4/12 からリリースがなく、対応される見込みがない・Recoilをフォークして自分たちでメンテしていくリソースはないパッチを当てれば動くには動くがプロダクションで動かすには信頼できない

Slide 6

Slide 6 text

Recoilが依存関係にある限りReact 19へのバージョンアップはできない PR TIMESは17年続いているサービスであり、現在も様々な新機能が追加され続けている今後も数年先の機能追加などを考え、継続的に運用していく必要がある Recoilの依存は将来的な事業運営を困難にするのは明らかであるためRecoilから脱却する

Slide 7

Slide 7 text

状態管理は何に移行しているのか 🤨

Slide 8

Slide 8 text

今後も数年先の機能追加などを考え、継続的に運用していく必要があるソフトウェアの持続性を考える必要があるそのためReact公式（標準）のAPIのみで状態管理を行うのが理想再掲 Recoil を useState, Context で置き換える方針 💪

Slide 9

Slide 9 text

From To サーバーデータ Recoil, TanStack Query TanStack Query, Context + useEffect Global State Recoil Context Local State Recoil useState 参考：「3種類」で管理するReactのState戦略・非同期処理はTanstack Queryに寄せつつ、　プロジェクトによっては Context + useEffect を使用・新規のプロジェクトではRecoilを一切使わない

Slide 10

Slide 10 text

置き換えたパターンと反省点 🧐

Slide 11

Slide 11 text

State自体必要ないパターン URLの状態によってコンポーネントを出し分ける実装で URLの状態を Recoil の atom, selector で管理 Setter (setState)がなく、SetterによるUIの更新がないコンポーネントの再レンダリングごとにURLの状態を見てコンポーネントを出し分ける。State自体削除。 Before After

Slide 12

Slide 12 text

URLのパラメーターから現在のページを取得 navigatorからUAをみてモバイルかどうか判断 2つのatom（仮実装） Before

Slide 13

Slide 13 text

2つのatomから合成したselector モバイルデバイスかつ外部共有ページであることを判定するselector Before

Slide 14

Slide 14 text

Selectorの値によりコンポーネントを出し分ける（仮実装） Setterはなく、参照のみ。  Before

Slide 15

Slide 15 text

関数を実行して分岐するように修正 After

Slide 16

Slide 16 text

State自体必要ないパターン Setterを使用していないStateはそもそもStateが必要ない（場合がほとんど） StateのSetterを呼び出した場合のみ更新されるという特性を活かしてインスタンスを保持するパターンはある

Slide 17

Slide 17 text

localStorageと同期するパターン Recoil の Atom Effects で localStorage と Stateを同期する実装 localStorageの値を初期値として設定するのはuseStateにコールバック関数を渡す更新は、setState のタイミングで localStorage も同時に更新するカスタムhooksを作成し、appからはhooksで更新をする Before After  

Slide 18

Slide 18 text

コードでのイメージ

Slide 19

Slide 19 text

Selectorで非同期処理をしているパターン Recoil の SelectorでAPIからデータを取得して、さらにそのデータを別のSelectorで加工(派生状態)してappから参照している実装 APIのデータ取得は useEffect、取得したデータの配布はContext 派生状態は全て削除して、派生状態への変換をカスタムhooksに切り出す。 Before After

Slide 20

Slide 20 text

Selector による APIデータ取得

Slide 21

Slide 21 text

派生状態 ① string型をDate型に変換派生状態①からの派生状態② Date型をフォーマットした string型

Slide 22

Slide 22 text

RecoilのSelectorで派生状態を作ると、その状態にsetState できるようになる。派生状態① にはDate型で setState する派生状態② にはフォーマットした日付を setState する string, Date, format後のstring 、三つのStateが存在する

Slide 23

Slide 23 text

大きく分けて以下の二つのパターンで置き換えられる。・一つのStateに三つの状態をまとめる。・状態を一つにしてカスタムhooksで参照するときに加工する

Slide 24

Slide 24 text

APIデータ取得後に、一つのStateに三つの状態をまとめる。(例)

Slide 25

Slide 25 text

状態を一つにしてカスタムhooksで参照するときに加工する・APIからデータ取得後にDate型のみで保存する・コンポーネントからはカスタムhooksで加工したデータを使う・setState するときは、毎回Date型に変換して setState する

Slide 26

Slide 26 text

参照するときのカスタムhooks（例）

Slide 27

Slide 27 text

更新するときのカスタムhooks（例） Stateの型はDate型一つのため、formatDateToDate関数（仮）で string型をDate型にしてセットする

Slide 28

Slide 28 text

実際には二つの置き換えパターンのハイブリッド・一つのオブジェクト(State)に全ての派生状態をまとめると　オブジェクトが大きくなってしまう。・カスタムhooksは、Stateの参照と更新を行うときにそれぞれ　毎回変換ロジックを書く必要がある。バランスを見て調整。 selectorで複数のselectorに依存かつそのselectorにセットしている場合は対応できないため別で対応が必要。

Slide 29

Slide 29 text

Selectorがどうしても必要な場面が今の所見当たらない。・多くの場合、コンポーネントから参照する際に　複数のStateを集約し、加工するために使う。　カスタムhooksで良いのでは？派生状態にSetterはいらないのでは？・カスタムhooksの変換ロジックは純粋関数のためテスト　しやすい。　カスタムhooksで良いのでは？

Slide 30

Slide 30 text

現状のつらみと進捗 😀

Slide 31

Slide 31 text

派生状態がつらい・派生状態が多い場合、根本のselectorから末端のselectorまで　一気に置き換える必要があり、影響範囲が広くQAが大変。・特に根本のSelectorでAPIデータを取得していると　それがGlobal Stateとして扱われ、アプリケーション全体に　影響が及びがちになっている。

Slide 32

Slide 32 text

影響範囲別に３つに分けて進行中・影響範囲小：　Recoilに依存しているファイル数が10ファイル以下のプロジェクト・影響範囲中：　20ファイル以下のプロジェクト・影響範囲大：　依存が特に広い50 〜 100ファイル以上のプロジェクト進行方法

Slide 33

Slide 33 text

・影響範囲小　9つのプロジェクトの内7プロジェクト完了・影響範囲中　3つのプロジェクトの内、現状どれもまだ手付かず・影響範囲大　4つのプロジェクトの内、2つのプロジェクトで派生状態に　つらみを覚えながら進行中。進捗

Slide 34

Slide 34 text

To be continued...