When to use Route Modals in Remix/React Router

[pallid hill]

I wrote an article with my opinion on when I would use a route modal vs using a modal controlled by a state

https://sergiodxa.com/articles/when-to-use-route-modal-in-react-router

[normal yoke]

agreed

nice one

imo if u just need a quick action and no more data

keep it at the client, make a form request, different button value

and all good

i guess my rule of thumb always goes back to simplicity

but yeah if needing to load more data and do more stuff

simpler and more efficient to have a url for it

[true phoenix]

The pattern I came up with was to implement the dialog on another route for the pre-JavaScript click case. This also gave me a route to a loader to load the extra data with.

Then I used an onClick handler to intercept the link to the dialog and instead set search params on the route for the JavaScript case. The modal dialog is a React portal to somewhere else on in the document so I couldn't find a way to unify the two patterns.

I also needed to include the time the dialog opened as a search param so the useFetcher key could be reset and re-fetch the extra data if the dialog was canceled and re-opened.

[normal yoke]

....in hindsight, no progressive enhancement

[normal yoke]

to clarify

modals wouldnt work without javascript

in business language

does ur site make money if JS isn't enabled

or on low end devices/internet

but... depends on your customers

at work where i work for example

our customers all over the world

so even in pakistan with the worst internet and low end phone

so performance for example is a priority

[pallid hill]

when I want to make the modal work without JS I use Remix Utils' useHydrated to now if the app is already hydrated when the route renders for the first time and then I decide if I show the content in a modal or not