Как ведёт себя state, если компонент отрендерен через портал в другом месте DOM?

Как работает state с порталами

Портал в React позволяет рендерить дочерние элементы в другой части DOM дерева, вне родительского компонента. Однако это не влияет на состояние (state) компонента. Состояние остается привязанным к логическому дереву React, а не к физическому DOM.

Пример

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

function Modal({ children }) {
  const [count, setCount] = useState(0);
  return ReactDOM.createPortal(
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>,
    document.getElementById('modal-root')
  );
}

В этом примере компонент Modal рендерится в #modal-root, но его состояние count управляется так же, как если бы он был внутри родителя. События, жизненный цикл и контекст React продолжают работать как обычно.

Вывод

Порталы полезны для модальных окон, всплывающих подсказок и других элементов, которые должны быть вне потока документа, но при этом сохранять полную интеграцию с React состоянием и контекстом.