redrockjs/frontend-docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update state, api, arch

Browse Source
This commit is contained in:
Valery Grunenko
2025-03-07 14:17:37 +03:00
parent 7484909864
commit 8263e7507a
40 changed files with 1774 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
docs/state-managers/06-tenstack-react-query.md
View File

@@ -2,4 +2,44 @@
sidebar_position: 6
---
# React-query
# React-query
**TanStack Query** (ранее известная как **React Query**) — это мощная библиотека для управления состоянием данных в React-приложениях. Она фокусируется на работе с асинхронными данными, такими как запросы к API, и предоставляет инструменты для кэширования, синхронизации, фонового обновления и управления состоянием загрузки и ошибок. TanStack Query значительно упрощает работу с данными, делая код более чистым и эффективным.
## Основные возможности TanStack Query:
1. **Кэширование данных:**
- Автоматически кэширует данные и управляет их актуальностью.
- Повторные запросы к одним и тем же данным не выполняются, если они уже есть в кэше.
2. **Фоновое обновление:**
- Автоматически обновляет данные в фоновом режиме, чтобы поддерживать их актуальность.
3. **Интеграция с React:**
- Предоставляет хуки (например, `useQuery`, `useMutation`) для удобной работы с данными в функциональных компонентах.
4. **Оптимизация запросов:**
- Управляет подписками на данные, предотвращая лишние запросы и ререндеры.
5. **Поддержка TypeScript:**
- TanStack Query полностью поддерживает TypeScript, что делает её удобной для типизированных проектов.
6. **Инструменты разработчика:**
- Встроенные DevTools позволяют отслеживать состояние запросов и кэша.
## Преимущества TanStack Query:
1. **Минимум boilerplate:**
- TanStack Query автоматически управляет кэшированием, обновлением и ошибками.
2. **Производительность:**
- Оптимизирует запросы и предотвращает лишние ререндеры.
3. **Гибкость:**
- Подходит для работы с REST API, GraphQL и другими источниками данных.
4. **Интеграция с React:**
- Предоставляет удобные хуки для работы с данными.
5. **Поддержка TypeScript:**
- Полностью поддерживает TypeScript.
## Недостатки TanStack Query:
1. **Ориентация на данные:**
- TanStack Query фокусируется на асинхронных данных и не подходит для управления состоянием приложения в целом.
2. **Кривая обучения:**
- Некоторые концепции (например, инвалидация кэша) могут быть сложными для новичков.
## Когда использовать TanStack Query?
- Если ваше приложение активно взаимодействует с API.
- Если требуется кэширование данных и автоматическое обновление UI.
- Для приложений с большим количеством асинхронных запросов.