🐡
Recoil を用いた React Flow の状態管理
はじめに
React Flow で Recoil を使う方法の備忘録です。
目的
状態管理ライブラリとして Recoil を採用していましたが、 React Flow でのみ React の useState を使うのが気にくわなかったため、 Recoil の状態に寄せることにしました。
これによりグローバルで React Flow の Node や Edge などの状態を参照、編集することが可能となりました。
実装
カスタムフック
- React Flow の Using a State Management Library に書かれていることを Recoil で書き換えました。
- useRecoilValue と useRecoilCallback を使ってロジックを切り出しています。
React Flow コンポーネント
参考
Discussion