⚛️ Хочу вам рассказать про рендеринг в React через реальную ситуацию с работы. Я отдал задачу на ревью, где был следующий код:

{isVisbile && <Modal />}
<Content />
<Table />

Мой коллега оставил приблизительно такой комментарий в Merge Request:

Лучше поместить модалку в конец JSX, а не на самый вверх. Так React будет рендерить компоненты оптимальнее. В твоем случае при открытии/закрытии модалки произойдет unmount у Content и Table, так как первым в JSX стоял Modal, а после закрытия модалки стал Content.

Что ж, давайте разбираться, в каком месте рендерить модалку?

Во-первых, React действительно смотрит на позицию компонент в JSX. Если у нас было <A/><B/>, а стало <B/><A/>, то React посмотрит, что первым стоял компонент A, а после обновления первым идет B. Тогда произойдет unmount у A и B.

Вернемся к нашему примеру. Кажется, что если isVisible будет false, то результат станет таким:

<Content />
<Table />

Но на самом деле он будет таким:

{false}
<Content />
<Table />

То есть вместо Modal первым в JSX будет стоять false, а значит позиция у Content и Table не поменяется. При этом false не будет отрендерен в реальный DOM, так как React обрабатывает такие моменты.

Давайте посмотрим пример, когда при открытии/закрытии Modal будет происходить unmount у Content и Table.

{isVisible ? (
  <>
    <Modal />
    <Content />
    <Table />
  </>
) : (
  <>
    <Content />
    <Table />
  </>
)}

Как видите, теперь при условии isVisible === true первым в JSX стоит Modal, а при false первым идет Content. React сравнивает типы Modal и Content и понимает, что они не совпадают. Та же самая проверка будет и для Table: до обновлений на 2-й позиции стоял Content, а теперь Table. Поэтому React вызовет unmount у Modal, Content, Table и заново отрендерит Content и Table.

ИТОГО: не важно, где рендерить компоненту Modal. Главное - позиция компонент в JSX.

P.S. Сделал для вас CodeSandbox, где можно проверить примеры из этого поста 😉