Вопрос проверяет понимание способов получения актуальных данных с сервера и обновления UI в реальном времени.
Чтобы отображать изменения в базе данных без перезагрузки страницы, клиент должен регулярно или реактивно получать обновления от сервера. Это можно делать через polling, WebSocket или другие push-механизмы. При получении новых данных обновляется состояние React, что вызывает ререндер. Выбор подхода зависит от требований к задержке, нагрузке и сложности системы.
Важно сразу разделить задачу на два уровня: как данные приходят с сервера и как React их отображает.
Клиент периодически запрашивает сервер.
setInterval(() => {
fetch("/api/data");
}, 5000);
Просто реализуется.
Подходит для нечастых обновлений.
Создаёт лишнюю нагрузку.
Сервер сам отправляет изменения клиенту.
Минимальная задержка.
Нет лишних запросов.
Более сложная инфраструктура.
Односторонний push от сервера.
Проще, чем WebSocket.
Подходит не для всех сценариев.
После получения данных:
Обновляется state или внешний стор.
React автоматически делает ререндер.
UI отображает актуальные данные.
setData(nextData);
Обновлять данные напрямую в объекте.
Не синхронизировать получение данных с React-состоянием.
Делать “вечный” polling без очистки.
Отображение изменений в БД без перезагрузки страницы достигается через регулярное получение обновлений с сервера или push-механизмы, после чего React просто делает то, что умеет лучше всего — рендерит новое состояние.