본문으로 건너뛰기

useRecoilRefresher_UNSTABLE(state)

useRecoilRefresher_UNSTABLE() 훅은 연관된 모든 캐시를 삭제하고 selector를 호출할 수 있는 콜백을 반환합니다. selector가 비동기 요청을 하면 재평가하고 새롭게 요청을 합니다. 예를 들어, 최신 데이터로 업데이트하거나 오류가 나서 다시 시도하는 경우에 유용합니다.(참조 Asynchronous Data Queries Guide)

useRecoilCallback() 이나 selector의 getCallback()를 사용해 캐시를 새로 고칠 수도 있습니다.


type Refresher = () => void;

function useRecoilRefresher_UNSTABLE(state: RecoilValue): Refresher

atom은 새로고침되지 않으며, 현재 상태를 유지합니다. selectors는 캐쉬를 지웁니다. selector는 주로 추상화로 사용하기 때문에 selector를 새로 고치면 연관된 모든 selector의 캐시가 재귀적으로 새로 고쳐집니다.

Example

const myQuery = selector({
key: 'MyQuery',
get: () => fetch(myQueryURL),
});

function MyComponent() {
const data = useRecoilValue(myQuery);
const refresh = useRecoilRefresher_UNSTABLE(myQuery);

return (
<div>
Data: {data}
<button onClick={() => refresh()}>Refresh</button>
</div>
);
}