Почему при использовании state и useEffect ошибка гидрации не возникает? Каков порядок гидрации, первого рендера и выполнения useEffect?

Гидрация — это процесс, при котором React на клиенте «оживляет» HTML, отданный сервером, привязывая к нему обработчики событий и внутреннее состояние. Ключевое требование: первый клиентский рендер должен дать ту же разметку, что и серверный HTML. Если разметка отличается, React выбрасывает ошибку гидрации.

Порядок этапов

1. Сервер выполняет рендер компонентов в HTML-строку (renderToString или renderToPipeableStream).
2. Браузер получает HTML и отображает его до загрузки JS.
3. Клиент загружает JS-бандл и запускает hydrateRoot.
4. React выполняет первый клиентский рендер, сверяя результат с существующим DOM.
5. После успешной гидрации React запускает эффекты useEffect.

Почему state и useEffect не ломают гидрацию

useState на первом рендере всегда возвращает начальное значение, переданное в аргументе. Это значение одинаково и на сервере, и на клиенте, поэтому разметка совпадает. Изменения состояния происходят только после взаимодействия пользователя или эффектов, то есть уже после гидрации.

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

Пример

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // выполнится только на клиенте после гидрации
    console.log('mounted');
  }, []);

  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Сервер отдаст кнопку с текстом 0. Клиент при гидрации тоже отрендерит 0, потому что начальное состояние одинаково. Только после этого сработает useEffect.

Когда ошибка всё же возникает

Если начальное состояние вычисляется по-разному на сервере и клиенте (например, через Date.now() или Math.random()), разметка разойдётся и появится ошибка гидрации. Также ошибка возникнет, если в теле компонента использовать window или localStorage без проверки на сервер.

Итог: state и useEffect безопасны для гидрации, потому что state на первом рендере детерминирован, а useEffect выполняется после гидрации. Этот подход стоит применять в SSR-приложениях, чтобы избежать рассинхрона разметки и корректно разделять серверную и клиентскую логику.