본문으로 건너뛰기

useSetRecoilState(state)

쓰기 가능한 Recoil 상태의 값을 업데이트하기 위한 setter 함수를 리턴합니다.


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

type SetterOrUpdater<T> = (T | (T => T)) => void;
  • state: 쓰기 가능한 Recoil 상태 ( atom 혹은 쓰기 가능selector )

상태를 변경하기 위해 비동기로 사용될 수 있는 setter 함수를 리턴합니다. setter는 새로운 값이나 이전 값을 인수로 받는 updater 함수를 넘겨줍니다.


이 hook은 컴포넌트가 상태에 읽지 않고 쓰기만 하려고 할 때 추천합니다. 만약 컴포넌트가 setter를 가져오기 위해 useRecoilState() hook을 사용한다면 업데이트를 구독하고 atom 혹은 selector가 업데이트되면 리렌더링을 합니다. useSetRecoilState()을 사용하는 것은 컴포넌트가 값이 바뀔 때 리렌더링을 하기 위해 컴포넌트를 구독하지 않고도 값을 설정하게 해줍니다.

Example

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} />;
}