目次

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

useSetRecoilState(state)

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

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

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

state: 書き込み可能なRecoil state(atomまたは書き込み可能なselector)

非同期に使用してstateを変更できるセッター関数を返します。セッターには新しい値が渡されるか、前の値を引数として受け取るアップデーター関数が渡されます。

これは、コンポーネントが読み取りを行わずにstateに書き込む場合に推奨されるhookです。
コンポーネントがuseRecoilState() hookを使用してセッターを取得した場合、コンポーネントは更新を登録し、atomまたはselectorが更新されたときに再レンダリングを行います。
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>
    </>
)}

// このコンポーネントはマウント時に1回レンダリングされます
function Form() {
  const setNamesState = useSetRecoilState(namesState);

  return <FormContent setNamesState={setNamesState} />;
}

参考サイト

・公式ドキュメント
・みらい翻訳

全目次

前書き
①動機
②コアコンセプト
③インストール
④入門
基本チュートリアル
⑤概要
⑥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()