Internal state does not update, even though property `open` changed

[alexbepple]

I work in a closed environment. Last weekend Chrome was updated for some users from 76 to 83. This caused our modals to break: they would remain open when they should not. We have not been able to find the root cause. But we have traced this to the following behavior: we change the property open programmatically, but the internal state sometimes (!) does not update.

From the React Developer Tools:

This happens with both React 16.8.6 and 16.13.1, and also with Chrome 84, on Windows.

[alexbepple]

We are trying to create a somewhat reproducible example on CodePen or similar, but to no avail so far.

We switched to react-modal as a quick fix. It also uses a boolean property. We did not have to change any of our logic. This supports our hypothesis that this is a bug in react-responsive-modal.

I am by no means sure, but I suspect that

const [showPortal, setShowPortal] = useState(open);

(https://github.com/pradel/react-responsive-modal/blob/master/src/index.tsx#L169) might be a problem.

I think that useState(prop) does not update state correctly when prop changes. Maybe this would help?

const [showPortal, setShowPortal] = React.useState(false);
React.useEffect(() => { setShowPortal(open); }, [showPortal]);

[memon07]

@alexbepple yes , i am facing the same issue .

[pradel]

@alexbepple Thanks for reporting the issue, should be fixed in v5.2.1 :)