Function useRevalidator

  • useRevalidator(): {
        state: RevalidationState;
        revalidate(): Promise<void>;
    }

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

    import { useRevalidator } from "react-router";

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

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

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

    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.

    Returns {
        state: RevalidationState;
        revalidate(): Promise<void>;
    }

Settings

Member Visibility