Использование условного рендеринга / DOM API в React Portal

Question

Добрый день всем!

Несколько дней, go Я разговаривал с ReactJS разработчиком. Мы говорим о порталах в React. Я был весьма удивлен, когда он сказал, что всегда использует DOM API для рендеринга порталов, в то время как я использую условный рендеринг. Он сослался на документацию React: https://reactjs.org/docs/portals.html использовали removeChild/appendChild методы. Например:

const appRoot = document.getElementById('app-root');
const modalRoot = document.getElementById('modal-root');

class Modal extends React.Component {
  constructor(props) {
    super(props);
    this.el = document.createElement('div');
  }

  componentDidMount() {
    modalRoot.appendChild(this.el);
  }

  componentWillUnmount() {
    modalRoot.removeChild(this.el);
  }

  render() {
    return ReactDOM.createPortal(
      this.props.children,
      this.el
    );
  }
}

Я всегда использую эту конструкцию:

const Modal = ({ open }) => {
  const content = <div>Hello!</div>;
  open 
    ? ReactDOM.createPortal(content, document.getElementById('modal')) 
    : null 
}

Как лучше всего использовать порталы в React?