useRevalidator

Framework Data

Summary

Reference Documentation ↗

Revalidate the data on the page for reasons outside of normal data mutations like Window focus or polling on an interval.

Note that page data is already revalidated automatically after actions. If you find yourself using this for normal CRUD operations on your data in response to user interactions, you're probably not taking advantage of the other APIs like useFetcher, Form, useSubmit that do this automatically.

import { useRevalidator } from "react-router";

function WindowFocusRevalidator() {
  const revalidator = useRevalidator();

  useFakeWindowFocus(() => {
    revalidator.revalidate();
  });

  return (
    <div hidden={revalidator.state === "idle"}>
      Revalidating...
    </div>
  );
}

Signature

function useRevalidator(): {
  revalidate: () => Promise<void>;
  state: DataRouter["state"]["revalidation"];
}

Returns

An object with a revalidate function and the current revalidation state