useRecoilRefresher_UNSTABLE(state)

The useRecoilRefresher_UNSTABLE() hook returns a callback which can be called with a selector to clear any caches associated with it. If a selector makes any async requests this would cause it to re-evaluate and issue a new request. This is useful, for example, if you wish to refresh with newer data or re-try after an error. (See Asynchronous Data Queries Guide)

You can also refresh caches from useRecoilCallback() or a selector's getCallback().

type Refresher = () => void;

function useRecoilRefresher_UNSTABLE(state: RecoilValue): Refresher

It is currently a no-op to "refresh" an atom, it will retain its current state. Selectors will have their caches cleared. Because wrapper selectors are often used as abstractions, refreshing a selector will also recursively refresh the caches of all selectors that it depends on.

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

Example​

Example