React modal portal disappearing issue

Medium

You're building a modal component that needs to render outside the main app container. Why is this implementation causing the modal to disappear unexpectedly?

ReactReact hooksPortalsUseeffectDom manipulation

1const Modal = ({ isOpen, children }) => {
  const modalRoot = document.getElementById('modal-root');
  const modalElement = document.createElement('div');
  
  useEffect(() => {
      if (isOpen) {
          modalRoot.appendChild(modalElement);
      }
      return () => {
          modalRoot.removeChild(modalElement);
      };
  }, [isOpen]);
13
  return isOpen ? createPortal(children, modalElement) : null;
15};

You're building a modal component that needs to render outside the main app container. Why is this implementation causing the modal to disappear unexpectedly?

Hint