Урок 11 · React

Отдельные loading и error

Загрузка, успех и ошибка — три состояния, и одно из них не должно затирать остальные.

Почему это следующий шаг

Два экрана уже переключаются. Запрос к данным добавляет ожидание и возможный сбой.

Как сделать

Заведи loading и error рядом с данными. Перед запросом включи loading и сотри прошлую ошибку. В catch запиши текст ошибки. В finally выключи loading. В разметке сначала проверь loading, потом error, и только затем рисуй список. Пустой успешный список и ошибка сети выглядят по-разному.

const [error, setError] = useState("");
const [loading, setLoading] = useState(false);

Что проверить

• Во время запроса виден индикатор.
• При сбое виден текст и нет ложного пустого успеха.
• Повторный запрос стирает старую ошибку.