Храните дату, ошибку, ширину и счётчик раздельно. Начальный серверный и клиентский render должны совпадать; window и загрузку подключайте после монтирования.
Как построить адаптивный экран даты и счётчика
Храните дату, ошибку, ширину и счётчик раздельно. Начальный серверный и клиентский render должны совпадать; window и загрузку подключайте после монтирования.
Короткий ответ
Что ответить на собеседовании
Подробный разбор
Ответ с пояснениями
Условие
Нужен SSR-совместимый React-экран: fetchDate(): Promise<string>, ширина окна после монтирования и счётчик кликов. Какие состояния и правила загрузки необходимы?
Ответ
Храните дату, ошибку, ширину и счётчик раздельно. Начальный серверный и клиентский render должны совпадать; window и загрузку подключайте после монтирования.
Начальные значения: date=null, width=null, count=0; для неизвестных данных показывайте placeholder. Запрос обрабатывает успех и ошибку, а поздний ответ после размонтирования игнорируется. Resize-listener обновляет innerWidth и удаляется в cleanup. Counter получает value и onIncrement; обработчик использует setCount(v => v + 1). Контейнер центрируется CSS grid и не задаёт фиксированную ширину, ломающую мобильный экран.