目次

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

`useRecoilState(state)`

最初の要素がstateの値であり、2番目の要素が呼び出されたときに指定されたstateの値を更新するセッター関数であるタプル(組)を返します。

このhookは、指定されたstateにコンポーネントを暗黙的に登録します。

function useRecoilState<T>(state: RecoilState<T>): [T, SetterOrUpdater<T>];

type SetterOrUpdater<T> = (T | (T => T)) => void;

state: atomまたは書き込み可能なselector。書き込み可能なselectorは、定義にgetとsetの両方が含まれるselectorで、読み取り専用のselectorはgetのみが含まれます。

このAPIはReactのuseState()hookに似ていますが、引数としてデフォルト値の代わりにRecoil stateを取る点が異なります。この関数は、stateの現在の値とセッター関数のタプルを返します。セッター関数は、引数として新しい値を取るか、前の値をパラメーターとして受け取るアップデーター関数を取ることができます。

これは、コンポーネントがstateを読み書きしようとするときに使用することを推奨するhookです。

Reactコンポーネントでこのhookを使用すると、stateが更新されたときに再レンダリングするようにコンポーネントが登録されます。このhookは、stateにエラーがあるか、非同期解決が保留中の場合にスローされます。このガイドをご覧ください。

サンプルコード

import {atom, selector, useRecoilState} from 'recoil';

const tempFahrenheit = atom({
  key: 'tempFahrenheit',
  default: 32,
});

const tempCelcius = selector({
  key: 'tempCelcius',
  get: ({get}) => ((get(tempFahrenheit) - 32) * 5) / 9,
  set: ({set}, newValue) => set(tempFahrenheit, (newValue * 9) / 5 + 32),
});

function TempCelcius() {
  const [tempF, setTempF] = useRecoilState(tempFahrenheit);
  const [tempC, setTempC] = useRecoilState(tempCelcius);

  const addTenCelcius = () => setTempC(tempC + 10);
  const addTenFahrenheit = () => setTempF(tempF + 10);

  return (
    <div>
      Temp (Celcius): {tempC}
      <br />
      Temp (Fahrenheit): {tempF}
      <br />
      <button onClick={addTenCelcius}>Add 10 Celcius</button>
      <br />
      <button onClick={addTenFahrenheit}>Add 10 Fahrenheit</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()