Recoilとは

December 31, 2020

commit history
  1. 2020/12/27 23:54:44 4128652
headline

導入

前回parcelがなんなのか?気になって調べましたが今度はRecoilが気になったので調べました。

結論

global stateの管理ライブラリでした。

書き方

まずは使用するglobal stateを定義します。

const textState = atom({
  key: 'textState', // unique ID (with respect to other atoms/selectors)
  default: '', // default value (aka initial value)
});

次に使う場所で呼び出します

  const [text, setText] = useRecoilState(textState);

たったこれだけ。便利

サンプル

定義箇所 https://github.com/GeoffCox/recoil-examples/blob/master/atoms-tutorial/src/atoms.ts

使用箇所 https://github.com/GeoffCox/recoil-examples/blob/70ddbfef9cd5d9fb2698f9c490d6c7c735d219c8/atoms-tutorial/src/components/ToDoItemCreator.tsx#L8

おまけ

型の指定もuseStateみたいで親しみがある! ちょいちょいきになることがあるんで調べてめもっていきます


contact