Как определить первый рендер и фокус в React-компоненте?

Условие

Рассмотрите успешное первое монтирование в браузере, без StrictMode и Suspense:

function Child() {
  console.log('child');
  return <input autoFocus aria-label="Имя" />;
}
function App() {
  console.log('app');
  return <section><Child /><input aria-label="Email" /></section>;
}

Внешний код фокус не меняет. Каков порядок сообщений и где окажется фокус?

Ответ

При описанном монтировании выводятся app, затем child. После добавления DOM фокус получает поле «Имя» с autoFocus; обычное создание JSX само по себе фокус не устанавливает.

App возвращает описание дерева, затем React обрабатывает Child. Рендер вычисляет элементы, а применение их к DOM относится к commit. Поэтому нельзя искать готовый DOM-узел прямо в теле первого рендера. В режиме разработки StrictMode возможны повторные вызовы; они специально исключены из условия. Наличие логов ещё не означает, что браузер уже отрисовал пиксели.

Источник: react.dev.