HMR does not work in modal

[telcy]

What version of Remix are you using?

1.19.3

Are all your remix dependencies & dev-dependencies using the same version?

• Yes

Steps to Reproduce

1. clone https://github.com/telcy/remix-hmr-modal-issue
2. install dependencies
3. click "simple dialog" button
4. change modal text to trigger hmr

Expected Behavior

Modal should stay open and text should get replaced.

Actual Behavior

Modal closes

[brophdawg11]

I'm not familiar with mui-modal-provider but I'm not sure if this is a problem with Remix or not. Looking at it briefly, useModal is destroying the modal in an effect:

  useEffect(
    () => () => {
      if (!disableAutoDestroy) {
        destroy(id.current);
      }
    },
    [disableAutoDestroy, destroy]
  );

destroy there comes from their own internal useContext(ModalContext), so it seems as if it's identity is not stable.

I tested the useModal({ disableAutoDestroy: true }) option and that keeps the modal open during HMR - but I'm unsure of the impacts of keeping that option enabled in production use-cases.

@pcattori unless you have any specific ideas for where Remix HMR might be causing this I'm thinking this may need to be investigated on the MUI side?

[telcy]

I thought I might add that Vite and Next do not have this issue with the exact same modal setup. Unsure if it is a bug or just the nature how Remix's HMR works.

Edit:
https://github.com/telcy/next-simple-dialog
https://github.com/telcy/vite-simple-dialog

[dantxal]

I have a similar problem with modals, where HMR simply doesn't work (it refreshes the page).

Just by having an OverlayProvider component from 'react-aria' as a parent component for the Outlet in root.tsx, is enough to stop HMR from working. Even if there is no modal using that provider.

I will take a look at the implementation of the OverlayProvider myself, since I am still unsure whether that is a problem with that library or remix.

EDIT: Here is the repro: https://github.com/dantxal/repro-issue-7248-remix
Simply clone the repo and follow the instructions on Readme file to reproduce.

[dmarkow]

Same thing happens for me -- it's most obvious in modals (which are always triggered by a setState call), but really all state gets blown away on any HMR update in my app. For me it was DndProvider from react-dnd, which wraps my whole app. At a glance it seems to be a basic wrapper around a react context, but something about it doesn't like HMR. Sounds like a similar problem with these other providers.

[telcy]

@dantxal @dmarkow
As you said, it's losing all state on HMR updates. Have you found a solution for this issue?

[pcattori]

I wrote up some limitations of React Fast Refresh in the docs. Could be that things like DndProvider are class components? 🤷

But for issues that aren't reproducible in Vite nor Next, then the issue is most likely Remix-related, not a React Fast Refresh limitation.

[dmarkow]

@pcattori I know at least for react-dnd, it doesn't use classes. I remember seeing something similar in vite, where contexts were breaking HMR. They did something to the react-refresh code to deal with this.

[telcy]

I took a look into mui-modal-provider and it does not use classes either.