This function allows you opt-out of revalidation for a route's loader as an optimization.

There are several instances where data is revalidated, keeping your UI in sync with your data automatically:

If you define shouldRevalidate on a route, it will first check the function before calling the route loader for new data. If the function returns false, then the loader will not be called and the existing data for that loader will persist on the page.

  element={<MealPlans />}
  shouldRevalidate={({ currentUrl }) => {
    // only revalidate if the submission originates from
    // the `/meal-plans/new` route.
    return currentUrl.pathname === "/meal-plans/new";
    element={<NewMealPlanForm />}
    // `loadMealPlans` will be revalidated after
    // this action...
    element={<Meal />}
    // ...but not this one because origin the URL
    // is not "/meal-plans/new"

Note that this is only for data that has already been loaded, is currently rendered, and will continue to be rendered at the new URL. Data for new routes and fetchers at the new URL will always be fetched initially.

Using this API risks your UI getting out of sync with your data, use with caution!

Type Declaration

interface ShouldRevalidateFunction {
  (args: {
    currentUrl: URL;
    currentParams: AgnosticDataRouteMatch["params"];
    nextUrl: URL;
    nextParams: AgnosticDataRouteMatch["params"];
    formMethod?: Submission["formMethod"];
    formAction?: Submission["formAction"];
    formEncType?: Submission["formEncType"];
    formData?: Submission["formData"];
    actionResult?: DataResult;
    defaultShouldRevalidate: boolean;
  }): boolean;
Docs and examples CC 4.0