Untangling dialogs in React Router

[viscid nimbus]

I have been struggling with determining how to best implement dialogs in React Router apps for years:

• controlled vs uncontrolled for open state
• Forms vs fetchers for data submissions
• fetchers calling resource routes to form data(<select> options)
• useEffect for listening for the action data to close the dialog
• useEffect for listening for a toast message

There's a lot to consider. However, tons of these problems go away if you move dialogs into their own dedicated routes. This doesn't come without its own set of challenges though.

I had the privelege of giving the talk at the Austin meetup last night covering this topic. This is the guide I wish existed years ago but it couldn't without some recent new React Router features.

https://programmingarehard.com/2026/05/06/react-router-dialogs.html/

Hope it helps 🤘

[vale jackal]

very nice article - we've been dealing with similar issues, and independently got as far as your "take two". (we're allergic to useState/useEffect 🙂 ).

[viscid nimbus]

it becomes messy fast!

[vale jackal]

yeah, it's always nice to see that someone landed on the same solution

we had to conceed the close animation - using view transitions is a nice solution

especially since it's progressive enhancement

[viscid nimbus]

it's nice to be able to opt in to the view transition for a redirect because if you're using dialogs that *don't *have their own dedicated route then shadcn dialog remains responsible animating the close. both scenarios work 🤌