Выбор ответа Middle SSR, SSG, ISR, гидрация спрашивают часто обновлено
Причина hydration mismatch
Вопрос
Какой код вызовет ошибку несоответствия гидрации?
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: <p{new Date().toLocaleTimeString()}</p в рендере. Время в рендере вычисляется на сервере и через несколько сотен миллисекунд на клиенте, строки не совпадут.
Варианты ответа
useEffect(() => setNow(Date.now()), [])<p>{new Date().toLocaleTimeString()}</p>в рендереправильный ответconst id = useId()для связиlabelиinput<button onClick={handle}>OK</button>
Разбор
Время в рендере вычисляется на сервере и через несколько сотен миллисекунд на клиенте, строки не совпадут. Значения, зависящие от клиента, ставят в эффект после монтирования, как в первом варианте: эффекты на сервере не выполняются, и первый рендер совпадает. useId как раз и придуман, чтобы id совпадали на сервере и клиенте. Обработчики в HTML не попадают и сравнение не ломают.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.