В React состояние (state) компонента сохраняется внутри самого компонента независимо от того, где он отрендерен в DOM. При использовании портала (ReactDOM.createPortal) компонент визуально рендерится в другом месте DOM-дерева, но логически остаётся в том же месте React-дерева, где он был объявлен.

Это значит, что состояние компонента не сбрасывается и ведёт себя так же, как если бы компонент был отрендерен в обычном месте. Портал влияет только на размещение в DOM, но не на жизненный цикл или состояние компонента.

Пример:

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

Здесь состояние count сохраняется, несмотря на то, что содержимое рендерится в modal-root вне основного DOM-узла приложения.

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