Паттерн загрузки данных с Toast & SWR Теодор Кларенс в своем | Заметки про React

Паттерн загрузки данных с Toast & SWR

Теодор Кларенс в своем блоге описывает подход к загрузке данных через кастомный хук и использование нотификаций.

При загрузке данных необходимо отображать пользователю текущий статус загрузки. Это может быть индикатор загрузки, сообщение об ошибке или сообщение об успешной загрузки. Также, если отправляется форма, то необходимо задизейблить кнопку отправки, чтобы форма не отправлялась больше одного раза. Для работы описанного поведения в крайнем случае необходимо заводить как минимум 3 стейта. Для переиспользования логики можно создать кастомный хук.

Теодор Кларенс использовал react-hot-toast для отображения текущего статуса загрузки в виде нотификаций. Библиотека react-hot-toast умеет принимать промис и отображать сообщение в зависимости от состояния промиса. Для получения данных используется библиотека swr, которая умеет кэшировать ответы на запросы и обновлять кэш при повторном обращении.

const { data: pokemonData, isLoading } = useWithToast(
useSWR('https://pokeapi.co/api/v2/pokemon?limit=20')
);


https://theodorusclarence.com/blog/react-loading-state-pattern