useSetRecoilState(state)

書き込み可能な Recoil state の値を更新するためのセッター関数を返します。

function useSetRecoilState<T>(state: RecoilState<T>): SetterOrUpdater<T>;

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

state: 書き込み可能な Recoil state（atom または書き込み可能な selector）

状態を非同期に変更するために使用できるセッター関数を返します。セッターには、新しい値か、前の値を議論として受け取るアップデータ関数のいずれかを渡すことができます。

コンポーネントは Recoil state へ書き込み、読み込む必要がない場合、このフックを使用することをお勧めします。コンポーネントがセッターを取得するために useRecoilState() フックを使用する場合、更新にもサブスクライブし、atom やセレクタが更新されたときに再レンダリングされます。useSetRecoilState() を使用すると、コンポーネントは値の変更時にコンポーネントを再レンダリングせずに値を設定できます。

例

import {atom, useSetRecoilState} from 'recoil';

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

function FormContent({setNamesState}) {
  const [name, setName] = useState('');
  
  return (
    <>
      <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
      <button onClick={() => setNamesState(names => [...names, name])}>Add Name</button>
    </>
)}

// This component will be rendered once when mounting
function Form() {
  const setNamesState = useSetRecoilState(namesState);
  
  return <FormContent setNamesState={setNamesState} />;
}

例​

例