目次

前書き　①　②　③　④
基本チュートリアル　⑤　⑥　⑦
ガイド　⑧　⑨　⑩
APIリファレンス
Core

•　⑪ <RecoilRoot />

•　State

　・　⑫ atom()

　・　⑬selector()

　・　⑭Loadable

　・　⑮useRecoilState()

　・　⑯useRecoilValue()

　・　⑰useSetRecoilState()

　・　⑱useResetRecoilState()

　・　⑲useRecoilValueLoadable()

　・　⑳useRecoilStateLoadable()

　・　㉑isRecoilValue()

•　Snapshots　㉒　㉓　㉔　㉕

•　㉖useRecoilCallback()

•　雑録(Misc)　㉗
実用(utils)　㉘　㉙　㉚　㉛　㉜　㉝　㉞　㉟

※全目次は一番下にあります

`atom(options)`

atomはRecoilのstateを表します。atom()関数は書き込み可能なRecoilStateオブジェクトを返します。

function atom<T>({
  key: string,
  default: T | Promise<T> | RecoilValue<T>,

  effects_UNSTABLE?: $ReadOnlyArray<AtomEffect<T>>,

  dangerouslyAllowMutability?: boolean,
}): RecoilState<T>

key - atomを内部的に識別するために使用される一意の文字列。この文字列は、アプリケーション全体で他のatomおよびselectorに対して一意である必要があります。
default - atom、Promise、または同じタイプの値を表す別のatomまたはselectorの初期値。
effects_UNSTABLE - atomのAtom Effectsのオプションの配列。
dangerouslyAllowMutability - Recoilは、atomのstateの変化に依存して、atomを再描画に使用するコンポーネントに通知するタイミングを決定します。atomの値が変更された場合、これをバイパスし、登録するコンポーネントに適切に通知せずにstateを変更する可能性があります。これを防ぐために、保存されている値はすべて凍結されます。場合によっては、このオプションを使用してこれをオーバーライドすることが望ましいこともあります。

ほとんどの場合、次のhookを使用してatomを操作します。

useRecoilState():このhookは、atomに対する読み取りと書き込みの両方を行う場合に使用します。このhookは、コンポーネントをatomに登録します。
useRecoilValue():このhookは、atomの読み取りのみを行う場合に使用します。このhookは、コンポーネントをatomに登録します。
useSetRecoilState():このhookは、atomへの書き込みのみを行う場合に使用します。
useResetRecoilState():このhookを使用して、atomをデフォルト値にリセットします。

コンポーネントを登録せずにatomの値を読み取る必要があるまれなケースについては、useRecoilCallback()を参照してください。

atomは静的な値で初期化することも、Promiseや同じ型の値を表すRecoilValueで初期化することもできます。
Promiseは保留中の可能性があり、デフォルトselectorは非同期かもしれないため、これはatomの値も保留中の可能性があり、読み込み時にエラーをスローするかもしれないということを意味します。
atomの設定時にPromiseを割り当てることはできません。非同期関数にはselectorを使用してください。

atomを使ってPromiseやRecoilValueを直接格納することはできませんが、オブジェクトにラップすることはできます。Promiseは変更可能(ミュータブル)かもしれないことに注意してください。atomは純粋であれば関数に設定することができますが、そのためにはupdater形式のセッターを使う必要があるかもしれません。(例: set (myAtom, ()=>myFunc);)

サンプルコード

import {atom, useRecoilState} from 'recoil';

const counter = atom({
  key: 'myCounter',
  default: 0,
});

function Counter() {
  const [count, setCount] = useRecoilState(counter);
  const incrementByOne = () => setCount(count + 1);

  return (
    <div>
      Count: {count}
      <br />
      <button onClick={incrementByOne}>Increment</button>
    </div>
  );
}

参考サイト

・公式ドキュメント
・みらい翻訳

全目次

前書き
①動機
②コアコンセプト
③インストール
④入門
基本チュートリアル
⑤概要
⑥Atoms
⑦Selectors
ガイド
⑧非同期データクエリ
⑨非同期状態・同期状態
⑩Stateの永続性
APIリファレンス
Core

•　⑪ <RecoilRoot />

•　State

　・　⑫ atom()

　・　⑬selector()

　・　⑭Loadable

　・　⑮useRecoilState()

　・　⑯useRecoilValue()

　・　⑰useSetRecoilState()

　・　⑱useResetRecoilState()

　・　⑲useRecoilValueLoadable()

　・　⑳useRecoilStateLoadable()

　・　㉑isRecoilValue()

•　Snapshots

　・　㉒Snapshot

　・　㉓useRecoilTransactionObserver()

　・　㉔useRecoilSnapshot()

　・　㉕useGotoRecoilSnapshot()

•　㉖useRecoilCallback()

•　雑録(Misc)

　・　㉗useRecoilBridgeAcrossReactRoots()
実用(utils)

•　㉘atomFamily()

•　㉙selectorFamily()

•　㉚constSelector()

•　㉛errorSelector()

•　㉜waitForAll()

•　㉝waitForAny()

•　㉞waitForNone()

•　㉟noWait()