useRecoilState(state)

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

このフックは、要求された状態の変更に対して、コンポーネントの再レンダリングをサブスクライブします。

React 18遷移（Recoil stateの突然変異に基づく）の試験的なサポートには、useRecoilState_TRANSITION_SUPPORT_UNSTABLE()を使用します。

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

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

state：atomまたは書き込み可能なselectorです。書き込み可能なセレクターとは、定義にgetとsetの両方があるセレクターで、一方、読み取り専用セレクターはgetのみがあります。

このAPIは、ReactのuseState()フックと似ていますが、デフォルト値ではなくRecoil stateを引数として受け取ります。これは、状態の現在の値とセッター関数のタプルを返します。セッター関数は、引数として新しい値を受け取ることも、前の値をパラメータとして受け取る更新関数を受け取ることもできます。

コンポーネントがstateの読み書きを行う場合に使用する推奨フックです。

Reactコンポーネントでこのフックを使用すると、stateが更新されたときにコンポーネントの再レンダリングがサブスクライブされます。このフックは、stateにエラーがあるか、非同期処理の解決が保留されている場合は、例外を送出する場合があります。こちらのガイドを参照してください。

例

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

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

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

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

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

  return (
    <div>
      Temp (Celsius): {tempC}
      <br />
      Temp (Fahrenheit): {tempF}
      <br />
      <button onClick={addTenCelsius}>Add 10 Celsius</button>
      <br />
      <button onClick={addTenFahrenheit}>Add 10 Fahrenheit</button>
    </div>
  );
}

例​

例