𝗪𝗵𝘆 𝗜 𝗦𝘁𝗮𝗿𝘁𝗲𝗱 𝗟𝗲𝗮𝗿𝗻𝗶𝗻𝗴 𝗧𝗮𝗻𝗦𝘁𝗮𝗰𝗸 𝗤𝘂𝗲𝗿𝘆

𝗪𝗵𝘆 𝗜 𝗦𝘁𝗮𝗿𝘁𝗲𝗱 𝗟𝗲𝗮𝗿𝗻𝗶𝗻𝗴 𝗧𝗮𝗻𝗦𝘁𝗮𝗰𝗸 𝗤𝘂𝗲𝗿𝘆

Сьогодні я почав вивчати TanStack Query.

Він змінює підхід до створення React-додатків.

Багато розробників вважають, що це інструмент для управління станом, як Redux. Це не так. Він вирішує іншу проблему.

React-додатки працюють із двома типами стану:

• Стан UI: кнопки, модальні вікна та поля введення. • Серверний стан: дані з API, наприклад, користувачі або товари.

Більшість розробників використовують useState, useEffect або Redux для управління серверним станом. Це швидко стає хаотичним. Робота з серверними даними є складною, оскільки вони змінюються, потребують кешування та можуть не завантажитися.

TanStack Query — це менеджер серверного стану. Він бере на себе такі завдання:

• Отримання даних • Кешування відповідей • Оновлення застарілих даних • Фонове повторне отримання даних • Обробка помилок • Стан завантаження • Логіка повторних спроб

Вам більше не потрібно писати логіку завантаження та обробки помилок вручну. Ви просто вказуєте додатку, які дані вам потрібні.

Інструмент створює розумний шар кешування між вашим UI та вашим API.

Коли ваш UI запитує дані, інструмент спочатку перевіряє кеш. Якщо дані є, він миттєво їх відображає. Це робить ваш додаток швидким на відчуття.

Інструмент також оновлює дані у фоновому режимі. Ваш UI залишається актуальним без мерехтіння.

Він автоматично обробляє складні ситуації:

• Він виконує повторне отримання даних, коли ви повертаєте фокус на вікно. • Він виконує повторне отримання даних, коли відновлюється з'єднання з мережею. • Він показує кешовані дані, коли інтернет-з'єднання слабке.

Замість написання складних хуків useEffect, ви використовуєте один простий рядок:

const { data, isLoading, error } = useQuery({
  queryKey: ['users'],
  queryFn: fetchUsers
});

Це все, що вам потрібно.

Існують і інші інструменти:

• Redux Toolkit: добре підходить для складної логіки UI, але не є ідеальним для серверного стану. • SWR: легка альтернатива для простого кешування. • Apollo Client: найкращий вибір для GraphQL API.

Використовуйте TanStack Query, якщо ви працюєте з REST API та хочете мати швидкий UI з меншою кількістю коду.

Сучасна фронтенд-розробка — це про продуктивність та синхронізацію даних. TanStack Query бере на себе найскладніші частини, щоб ви могли зосередитися на функціоналі.

Мета не в тому, щоб писати менше коду. Мета в тому, щоб будувати розумніші системи.

Source: https://dev.to/usama_dev/why-i-started-learning-react-query-tanstack-query-today-5ceg