Unnecessary re-render when showing multiple modals..?

[jackdunncode]

I have this structure:

-- Parent ---- Modal -------- Child Modal

When I call NiceModal.show() in the Parent, it opens the Modal, without re-rendering the Parent (which is desired!). Then, in the Modal, I have a function to open a Child Modal. However this causes a re-render to the Modal (which is not desired!).

I have realised that useModal hook seems to be the culprit here, by watching the state change of useModal:

Here is the sequence of events, shown with console.log:

Opening Modal:

Then opening Child Modal:

As you can see, opening the Child Modal causes the first Modal to update (from visible: false back to visible: true).

How can I get around this?

[supnate]

Yes, it's a limitation for now, but a bit difficult to enhance: https://github.com/eBay/nice-modal-react/issues/58 . The workaround is use the static method NiceModal.show(MyModal/id, args) for your case.

[jackdunncode]

Yes, it's a limitation for now, but a bit difficult to enhance: #58 . The workaround is use the static method NiceModal.show(MyModal/id, args) for your case.

I already am using the static method, in both Parent and Modal

[jackdunncode]

Yes, it's a limitation for now, but a bit difficult to enhance: #58 . The workaround is use the static method NiceModal.show(MyModal/id, args) for your case.

I already am using the static method, in both Parent and Modal

Destructuring the following minimised the number of useEffects, but re-render was still occurring

const { visible, resolve, remove } = useModal();

[supnate]

Should have been resolved in v1.2.11.