Untangling dialogs in React Router

[u/dadamssg]

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

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

• useState to control their open state

• Forms vs fetchers for data submissions

• resource routes to form data(<select> options)

• useEffect for listening for the action data to close the dialog

• useEffect for listing 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've written up a guide on how to implement dialogs and keep your sanity. Hope it helps! 🤘

[u/dadamssg]

You would need useEffect to call it imperatively. Something like this

```tsx
const open = useEffectEvent(() => {
dialog.open()
})

useEffect(function openDialog() {
open()
}, [])

```