shouldRevalidate

This function lets apps optimize which routes data should be reloaded after actions and for client-side navigations.

  1. import type { ShouldRevalidateFunction } from "@remix-run/react";
  3. export const shouldRevalidate: ShouldRevalidateFunction = ({
  4.   actionResult,
  5.   currentParams,
  6.   currentUrl,
  7.   defaultShouldRevalidate,
  8.   formAction,
  9.   formData,
  10.   formEncType,
  11.   formMethod,
  12.   nextParams,
  13.   nextUrl,
  14. }) => {
  15.   return true;
  16. };

This feature is an additional optimization. In general, Remix’s design already optimizes which loaders need to be called and when. When you use this feature you risk your UI getting out of sync with your server. Use with caution!

During client-side transitions, Remix will optimize reloading of routes that are already rendering, like not reloading layout routes that aren’t changing. In other cases, like form submissions or search param changes, Remix doesn’t know which routes need to be reloaded, so it reloads them all to be safe. This ensures your UI always stays in sync with the state on your server.

This function lets apps further optimize by returning false when Remix is about to reload a route. If you define this function on a route module, Remix will defer to your function on every navigation and every revalidation after an action is called. Again, this makes it possible for your UI to get out of sync with your server if you do it wrong, so be careful.

actionResult

When a submission causes the revalidation this will be the result of the action—either action data or an error if the action failed. It’s common to include some information in the action result to instruct shouldRevalidate to revalidate or not.

  1. export async function action() {
  2.   await saveSomeStuff();
  3.   return { ok: true };
  4. }
  6. export function shouldRevalidate({
  7.   actionResult,
  8.   defaultShouldRevalidate,
  9. }) {
  10.   if (actionResult?.ok) {
  11.     return false;
  12.   }
  13.   return defaultShouldRevalidate;
  14. }

defaultShouldRevalidate

By default, Remix doesn’t call every loader all of the time. There are reliable optimizations it can make by default. For example, only loaders with changing params are called. Consider navigating from the following URL to the one below it:

  • /projects/123/tasks/abc
  • /projects/123/tasks/def

Remix will only call the loader for tasks/def because the param for projects/123 didn’t change.

It’s safest to always return defaultShouldRevalidate after you’ve done your specific optimizations that return false, otherwise your UI might get out of sync with your data on the server.

  1. export function shouldRevalidate({
  2.   defaultShouldRevalidate,
  3. }) {
  4.   if (whateverConditionsYouCareAbout) {
  5.     return false;
  6.   }
  8.   return defaultShouldRevalidate;
  9. }

This is more dangerous, but YOLO:

  1. export function shouldRevalidate() {
  2.   return whateverConditionsYouCareAbout;
  3. }

currentParams

These are the URL params from the URL that can be compared to the nextParams to decide if you need to reload or not. Perhaps you’re using only a partial piece of the param for data loading, you don’t need to revalidate if a superfluous part of the param changed.

For instance, consider an event slug with the id and an human-friendly title:

  • /events/blink-182-united-center-saint-paul--ae3f9
  • /events/blink-182-little-caesars-arena-detroit--e87ad
  1. export async function loader({ params }: LoaderArgs) {
  2.   const id = params.slug.split("--")[1];
  3.   return loadEvent(id);
  4. }
  6. export function shouldRevalidate({
  7.   currentParams,
  8.   nextParams,
  9.   defaultShouldRevalidate,
  10. }) {
  11.   const currentId = currentParams.slug.split("--")[1];
  12.   const nextID = nextParams.slug.split("--")[1];
  13.   if (currentId !== nextID) {
  14.     return true;
  15.   }
  17.   return defaultShouldRevalidate;
  18. }

currentUrl

This is the url the navigation started from.

nextParams

In the case of navigation, these are the URL params from the next location the user is requesting. Some revalidations are not navigation, so it will simply be the same as currentParams.

nextUrl

In the case of navigation, this the URL the user is requesting. Some revalidations are not navigation, so it will simply be the same as currentUrl.

formMethod

The method (probably "GET" or "POST") used from the form submission that triggered the revalidation.

formAction

The form action (<Form action="/somewhere">) that triggered the revalidation.

formData

The data submitted with the form that triggered the revalidation.

Use Cases

Never reloading the root

It’s common for root loaders to return data that never changes, like environment variables to be sent to the client app. In these cases you never need the root loader to be called again. For this case, you can simply return false.

  1. export const loader = async () => {
  2.   return json({
  3.     ENV: {
  4.       CLOUDINARY_ACCT: process.env.CLOUDINARY_ACCT,
  5.       STRIPE_PUBLIC_KEY: process.env.STRIPE_PUBLIC_KEY,
  6.     },
  7.   });
  8. };
  10. export const shouldRevalidate = () => false;

With this in place, Remix will no longer make a request to your root loader for any reason, not after form submissions, not after search param changes, etc.

Ignoring search params

Another common case is when you’ve got nested routes and a child component has a feature that uses the search params in the URL, like a search page or some tabs with state you want to keep in the search params.

Consider these routes:

  1. └── $projectId.tsx
  2.     └── activity.tsx

And let’s say the UI looks something like this:

  1. +------------------------------+
  2. |    Project: Design Revamp    |
  3. +------------------------------+
  4. |  Tasks | Collabs | >ACTIVITY |
  5. +------------------------------+
  6. |  Search: _____________       |
  7. |                              |
  8. |  - Ryan added an image       |
  9. |                              |
  10. |  - Michael commented         |
  11. |                              |
  12. +------------------------------+

The activity.tsx loader can use the search params to filter the list, so visiting a URL like /projects/design-revamp/activity?search=image could filter the list of results. Maybe it looks something like this:

  1. export async function loader({
  2.   params,
  3.   request,
  4. }: LoaderArgs) {
  5.   const url = new URL(request.url);
  6.   return json(
  7.     await exampleDb.activity.findAll({
  8.       where: {
  9.         projectId: params.projectId,
  10.         name: {
  11.           contains: url.searchParams.get("search"),
  12.         },
  13.       },
  14.     })
  15.   );
  16. }

This is great for the activity route, but Remix doesn’t know if the parent loader, $projectId.tsx also cares about the search params. That’s why Remix does the safest thing and reloads all the routes on the page when the search params change.

In this UI, that’s wasted bandwidth for the user, your server, and your database because $projectId.tsx doesn’t use the search params. Consider that our loader for $projectId.tsx looks something like this:

  1. export async function loader({ params }: LoaderArgs) {
  2.   const data = await fakedb.findProject(params.projectId);
  3.   return json(data);
  4. }

There are a lot of ways to do this, and the rest of the code in the app matters, but ideally you don’t think about the UI you’re trying to optimize (the search params changing) but instead look at the values your loader cares about. In our case, it only cares about the projectId, so we can check two things:

  • did the params stay the same?
  • was it a GET and not a mutation?

If the params didn’t change, and we didn’t do a POST, then we know our loader will return the same data it did last time, so we can opt-out of the revalidation when the child route changes the search params.

  1. export function shouldRevalidate({
  2.   currentParams,
  3.   nextParams,
  4.   formMethod,
  5.   defaultShouldRevalidate,
  6. }) {
  7.   if (
  8.     formMethod === "GET" &&
  9.     currentParams.projectId === nextParams.projectId
  10.   ) {
  11.     return false;
  12.   }
  14.   return defaultShouldRevalidate;
  15. }