Body class not removed under certain circumstances

Summary:

If React Modal is mounted and almost immediately unmounted, the body’s class is not removed when the modal disappears. If this class is used to prevent scrolling, the body will remain unscrollable forever.

Steps to reproduce:

1. Create a project using React Modal.
2. Add the following component somewhere on the page:

import React, { useEffect, useState } from 'react';
import Modal from 'react-modal';

export const Flash = () => {
   const [hide, setHide] = useState(0);

   useEffect(() => {
       if (!hide) {
           setHide(true);
       }
   }, [hide])

   return <>
       {!hide && <Modal isOpen={true}>
           <div>
               Modal text.
           </div>
       </Modal>}
       Other text
   </>
}

1. Load the page and inspect the body element. Note that it still has the class ReactModal__Body--open even though no modal is open.

Expected behavior:

The body element should not have the class ReactModal__Body--open.

Link to example of issue:

https://codesandbox.io/s/react-modal-unmount-bug-duvib?file=/src/App.js

Additional notes:

This is happens because the example component is unmounting the modal immediately in a useEffect. This causes it to unmount after componentDidMount is called, but before ModalPortal’s setState takes effect. So when componentWillUnmount is called on ModalPortal, it does not yet have the open state, so it does not decrement the counter of the className.

[Plygon]

Maybe the actions in beforeOpen can be called after the isOpen state is set to true, instead of before. That way it won’t add the class until the state is actually set. It at least does the trick at first glance.

I have no clue if that would break something else, but I wanted to offer something instead of just reporting this and dipping!

[diasbruno]

@vadymshymko it’s ok as a workaround for the problem, but it should not be handled by the user.

We need to investigate this further. Although, I don’t have time to work on this, I can assist if you guys want to give it a try. Just @ me an I’ll answer.