useSetRecoilState(狀態)

傳回一個更新 Recoil 可寫入狀態值的設置函式。

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

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

狀態：可寫入的 Recoil 狀態（atom 或可寫入 selector）

傳回一個 setter 函式，可透過非同步方式變更狀態。setter 可能會傳入新值，或傳入一個將先前的值作為引數接收的更新器函式。

當組件打算寫入狀態但不讀取狀態時，建議使用此 hook。如果組件使用 useRecoilState() hook 來取得 setter，它也會訂閱更新並在 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>
    </>
)}

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

範例​

範例