Как React Query упрощает работу с серверным состоянием?

Question

React Query берёт на себя загрузку, кэширование и обновление серверных данных. Он автоматически управляет состояниями loading, error и success. Библиотека избавляет от ручного useEffect и хранения данных в useState. Данные становятся консистентными во всём приложении. Это значительно упрощает код компонентов.

YeaHub · Accepted Answer

Серверное состояние имеет другую природу, чем локальное состояние UI, и требует отдельного подхода.Что такое серверное состояниеServer state — это данные, которые:приходят с серверамогут устареватьмогут меняться вне приложениятребуют синхронизацииХранить такие данные в useState неудобно и опасно.Что делает React QueryReact Query берёт на себя ключевые задачи:Загрузка данныхавтоматический запрос при монтированииповторные запросы при необходимостиКэшированиеобщий кэш для всего приложенияпереиспользование данных между компонентамиУправление состояниямиisLoadingisErrordataconst { data, isLoading } = useQuery(['users'], fetchUsers)
Дополнительные возможностиавтоматический refetchфоновое обновлениеинвалидция кэша после мутацийВыводReact Query снимает большую часть рутинной работы с серверным состоянием. Он делает код проще, стабильнее и легче для сопровождения.