atom(options)

atomはRecoilにおける状態を表します。atom()関数は、書き込み可能なRecoilStateオブジェクトを返します。

function atom<T>({
  key: string,

  default?: T | Promise<T> | Loadable<T> | WrappedValue<T> | RecoilValue<T>,

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

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

key - atomを内部的に識別するために使用される一意の文字列。この文字列は、アプリケーション全体の他のatomとselectorに関して一意である必要があります。
default - atomの初期値。Promise、Loadable、ラップされた値、または同じ型の別のatomやselectorを初期値として指定できます。
- selectorがデフォルトとして使用される場合、デフォルトselectorが更新されるとatomも動的に更新されます。atomが設定されると、atomがリセットされない限り、その値が保持されます。
- nullやundefinedを含む値とは反対に、defaultが指定されない場合、atomは「保留中」の状態になり、設定されるまでSuspenseをトリガーします。
- デフォルトのatom値をPromise、Loadable、atom、selector、または関数をアンラップせずに直接設定したい場合は、atom.value(...)でラップします。
effects - atomに対するAtom Effectsのオプションの配列。
dangerouslyAllowMutability - 場合によっては、状態変化を表さないatomに格納されているオブジェクトの変更を許可することが望ましい場合があります。開発モードでオブジェクトの凍結をオーバーライドするには、このオプションを使用します。

Recoilはatomの状態変化を管理して、そのatomを購読しているコンポーネントに再レンダリングを通知するタイミングを把握するため、atomの状態を変更するには、以下にリストされているフックを使用する必要があります。atomに格納されているオブジェクトが直接変更された場合、これはバイパスされ、購読しているコンポーネントに適切に通知することなく状態が変更される可能性があります。このようなバグを検出するために、Recoilは開発モードではatomに格納されているオブジェクトを凍結します。

ほとんどの場合、atomとやり取りするには、次のフックを使用します。

useRecoilState()：atomの読み取りと書き込みの両方を意図する場合にこのフックを使用します。このフックは、コンポーネントをatomに購読します。
useRecoilValue()：atomの読み取りのみを意図する場合にこのフックを使用します。このフックは、コンポーネントをatomに購読します。
useSetRecoilState()：atomへの書き込みのみを意図する場合にこのフックを使用します。
useResetRecoilState()：atomをデフォルト値にリセットするためにこのフックを使用します。

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

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

atomはPromiseまたはRecoilValueを直接格納するために使用できませんが、オブジェクトにラップできます。Promiseは変更可能である可能性があります。atomは純粋な関数であれば関数に設定できますが、そのためにはセッターの更新子形式を使用する必要がある場合があります。（例：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>
  );
}

Atomファミリー

atomFamily()は、関連する状態のコレクションを格納したり、atomの状態をスコープするのに役立ちます。

例​

Atomファミリー​

例

Atomファミリー