useRecoilValue(state)

指定された Recoil state の値を返します。

このフックは、Recoil state の変更が発生した場合にコンポーネントを再描画するためにサブスクライブします。

Recoil state のミューテーションに基づく React 18 トランジションの実験的なサポートのために useRecoilValue_TRANSITION_SUPPORT_UNSTABLE() を使用します。

function useRecoilValue<T>(state: RecoilValue<T>): T;

state:atomまたはselector

これは、コンポーネントが書き込みを行わずにステートを読み取ることを目的とした場合に使用が推奨されるフックです。このフックは読み取り専用ステートと書き込み可能なステートの両方で動作します。アトムは書き込み可能なステートである一方、セレクターは読み取り専用または書き込み可能のどちらかです。詳細については selector() を参照してください。

このフックを React コンポーネントで使用すると、state が更新されたときにコンポーネントの再描画がサブスクライブされます。このフックは、state にエラーがあるか、非同期解決が保留されている場合に例外をスローする可能性があります。詳細はこのガイドを参照してください。

例:

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

const namesState = atom({
  key: 'namesState',
  default: ['', 'Ella', 'Chris', '', 'Paul'],
});

const filteredNamesState = selector({
  key: 'filteredNamesState',
  get: ({get}) => get(namesState).filter((str) => str !== ''),
});

function NameDisplay() {
  const names = useRecoilValue(namesState);
  const filteredNames = useRecoilValue(filteredNamesState);

  return (
    <>
      Original names: {names.join(',')}
      <br />
      Filtered names: {filteredNames.join(',')}
    </>
  );
}

例:​

例: