Preventing Loaders from Re-running on Form Submission in Remix

[osowskimateusz97]

Hey everyone,

I have a question about handling user preferences in a Remix app.

In my root.tsx, I have a sidebar that opens a modal. Inside this modal, there's a form where users can update their settings (e.g., language, date format). When a user updates these settings, I want to store them in a cookie so that they persist when they return. I'm using remix-i18next for internationalization.

However, when I submit the form, Remix automatically re-runs the loaders. In this case, I don’t want that to happen—I just want to send a POST request to update the cookie without triggering a full loader refresh.

1. How can I prevent the loaders from re-running when submitting this form?
2. Should the action responsible for updating user settings be placed in root.tsx, or should I move it to an api folder for better separation?

For context, I’m using Remix with a Node server and React Router v7.

Any advice would be greatly appreciated!

[sergiodxa]

You can export a shouldRevalidate function from your routes to control when that route should revalidate.

Remix Docs: https://remix.run/docs/en/main/route/should-revalidate
RR Docs: https://reactrouter.com/start/framework/route-module#shouldrevalidate

[osowskimateusz97]

Ok thanks, so I should probably create a utility function, but since modal with a language switcher is in the layout, shouldRevalidate will be included in all routes, right?

Is there a better solution for handling this?

[osowskimateusz97]

Also, is it fine to have the action in root.tsx, or should I move it to routes/api/update-language.ts?

[sergiodxa]

Ok thanks, so I should probably create a utility function, but since modal with a language switcher is in the layout, shouldRevalidate will be included in all routes, right?

Is there a better solution for handling this?

You would have to do it on every route you don't want to revalidate.

Also, is it fine to have the action in root.tsx, or should I move it to routes/api/update-language.ts?

It's ok, but you may be better moving it to another route so you can made shouldRevalidate check the pathname and avoid revalidation if the request went to that route, but not prevent other actions in the root.

[osowskimateusz97]

Okay, so I could have this structure:

routes/
  root.tsx
  index.tsx
  other-route.tsx
  modal/
    change-language.tsx

In modal/change-language.tsx, I will render a dialog and include an action that will change the user settings. Right?

But I still need to check in other routes such as index.tsx or other-route.tsx using shouldRevalidate if the previous URL came from the change-language path. If it did, then I shouldn't rerun the loader. Is that correct?

Also, is it good idea to have multiple modals in the modal folder?

[vano-phoenix]

So, if I make a small update - like changing a user's setting from a modal that could be opened on top of any page, I’m supposed to add shouldRevalidate to every route in the app and check if the incoming request has some hardcoded pathname that matches the action where I submitted the form data? What a cool feature :dd Blending everything together, hardcoding pathnames, matching with regexes…