I've been feeling out different modal solutions trying to find the best way to handle them, but I'm thinking there has to be a better way that I'm missing.

The first way is just to store the modal directly in the page, and controlling visibility with an isOpen prop or similar. This works for modals that are specific to a single page, but it's kind of a pain because it's never quite clear where the modal JSX belongs.

The other solution would be to have a modal manager, which I thought was ideal. Just have a hook with openModal and closeModal functions, and set it up so that you can open them like so:

openModal('modalId', <Modal>{modalContent}</Modal>

It's super clean and works great, and I hadn't run into any issues with this approach until today.

The modal contains a form and I need to pass isPending state to the modal, so that I can display a loading spinner while the form's being submitted. But any state I pass in using openModal() isn't reactive, so there's seemingly no good way to handle this. I could use global state to update isPending when the mutation completes, but that feels kind of hacky and doesn't actually address the problem.

Is there a better way to handle modals where I don't have to choose between having a dynamic modal manager or having reactive state? Or is this just a tradeoff that's set in stone?

Thanks for the input