Open1
Recoil勉強用のリンク集
shohigashi公式
-
https://recoiljs.org/
- getting startedなレポジトリはないが公式ページでは以下の動画が紹介されています
- https://learnrecoil.com/
-
https://www.youtube.com/watch?v=_ISAA_Jt9kI
- 紹介されているサンプルアプリのgithubを探してみたけどぱっとは見つかりませんでした
解説
-
https://blog.uhy.ooo/entry/2020-05-16/recoil-first-impression/
- 思想的なところから解説されていてわかりやすいです
- Line証券やNature Remoではすでに(少なくとも2021年4月現在)実践投入されているらしいです
- 有名なmizchiさんの記事: https://mizchi.dev/study-recoil
- UIT insideでも取り上げられていました
- https://uit-inside.linecorp.com/episode/49
- 「recoil使うならカスタムフックを使って」という話に非常にうなずきました
- 通常のカスタムフックと違ってコンポーネント間で状態とロジックを共有できるので、「ロジックは同じだけどDOM空間的に離れている要素」の間で簡単にロジックを共有できるのがうれしいなと感じます。
- モーダルの状態やイベントの管理とか、画面全体を支配する変数(記事詳細ページの記事IDとか)の管理をさくっとかけるのもうれしいです
- クラメソでも紹介されています
recoil + custom hooks
recoilはcustomhooksとの相性がよさそうです
実践でやってみた
- 最近試しました。
- 1ページ、5,6本のAPIを埋め込むような画面で
- pros
- atomとselector(derived state)に分けた設計が容易にできるので画面の状態を宣言的に作ることができそうです
- シンプルに（＝特に気を付けないで）作っても再レンダリングが非常に抑制されたものが作れるのでパフォーマンスが高いものが作れそうです
- 必要なatomやselectorを必要な場所にだけ呼び出す、という書き方が自然にできるのでpropsの受け渡しがかなり減るのも一つの理由かと思います
- 無論、React.useMemo, React.useCallbackなどを使って再レンダリングを抑制することも可能ですが、記述量が多くなりがちなのとバグが起こりやすくなってしまうので少し敬遠していました。
- 参考（これらの記事の内容と書いた方を批判したり貶めたりする意図はありません）
- 無論、React.useMemo, React.useCallbackなどを使って再レンダリングを抑制することも可能ですが、記述量が多くなりがちなのとバグが起こりやすくなってしまうので少し敬遠していました。
- 必要なatomやselectorを必要な場所にだけ呼び出す、という書き方が自然にできるのでpropsの受け渡しがかなり減るのも一つの理由かと思います
- cons
- カスタムフックで隠蔽することが前提になっているので、reactアプリを初めて触る人には敷居が高いかなと思いました。
- atomを無秩序に作ってしまうとその管理が大変そうです
- 特に「似たような状態を作らない」「このatomはどこで管理するのか」をチームメンバーが迷いなく遂行できるためには、ディレクトリ戦略をうまく考えないといけないなと思いました
- 「論理的に関係しないと思っていたatomが開発途中で実は関係する」と分かった時のリファクタリングも大変そう
- reduxならある程度大きい粒度でstateが分割されているのでまだリファクタリングは大変ではないように思います
- (2021/05/03時点で)devtoolsが（まだ）ない（多分）
- redux devtoolsのようにアクション発行の時系列がわかったり、その時点での状態のスナップショットがわかったりするのが恋しいです
- 何となく自分は状態を「A. 隣り合う2,3コンポーネント内で完結するもの」、「B. ページ内で使われるもの」、「C. アプリ全体で使われるもの」の３階層に分類していて、今までは「AはuseStateをはじめとするhooks, B, Cはredux」というように分けていたいのですが、reduxだとBのようなほかのページで参照されない状態を
reoiclで非同期処理
- ここら辺を見た
recoilでSSR
- ここらへんかなぁ
- getXXPropsで取得した値をinitializeStateに突っ込むとか
- atomの初期化はこれで簡単にできるけどselectorの値はどうするんだろう
- 例えばSSR時にAPIリクエストして、APIレスポンスの値を突っ込むけどAPIレスポンスの値はselectorにあるとか
- selectorのsetを使うのかな？
- 例えばSSR時にAPIリクエストして、APIレスポンスの値を突っ込むけどAPIレスポンスの値はselectorにあるとか
困ったこと
- recoil + nextjsで試したら非同期処理のErrorBoundaryがエラーをキャッチしてくれなかった
- これと同じエラー（だと思う）
- https://github.com/facebookexperimental/Recoil/issues/722
- https://github.com/facebookexperimental/Recoil/issues/722
- それどころかSuspenseもちゃんと動いていなかった感じがする
- これと同じエラー(原因が同じかは不明): https://github.com/vercel/next.js/issues/22508
- 参考にした記事
- これと同じエラー（だと思う）