Nega men 'useEffect' dan voz kechib, React Query-ni tanladim?

Keling, React dasturchisining oddiy kunini eslaymiz.

Loyihada backenddan ma'lumot olib kelish kerak. Nima qilamiz?

1. useState ochamiz (ma'lumot uchun).
2. Yana bitta useState (yuklanish holati - isLoading uchun).
3. Yana bitta useState (xatolik - error uchun).
4. useEffect yozamiz.
5. Ichida fetch funksiya.
6. try-catch bloklari...

Va bu faqat BITTA ma'lumot uchun. Agar foydalanuvchi sahifani yangilamasdan boshqa tabga o'tib ketsa-chi? Ma'lumot eskirib qoladi. Qaytib kelganda yana yangilash kerakmi? Keşlash (caching) nima bo'ladi?

To'g'risi, men yillar davomida bu narsalarni qo'lda yozib charchagandim.

Keyin men React Query (hozirgi nomi bilan TanStack Query) ni uchratdim. Va hayotim osonlashdi.

React Query bu shunchaki "fetching library" emas. U — Server State Manager.

#Nima degani bu?

Odatda biz hamma ma'lumotni Redux yoki Context-da saqlashga urinamiz. Lekin serverdagi ma'lumot (masalan, foydalanuvchi profili) aslida bizga tegishli emas. U serverda o'zgarishi mumkin. Biz uni shunchaki vaqtincha "qarzga olib" turibmiz.

React Query shu muammoni hal qiladi:

• Ma'lumotni keshlaydi (qayta-qayta so'rov yubormaysiz).
• Avtomatik yangilaydi (foydalanuvchi oynaga qaytganda).
• Loading va Error holatlarini o'zi beradi.

Qarang, kod qanchalik qisqaradi:

const { data, isLoading, error } = useQuery({
  queryKey: ['user'],
  queryFn: fetchUser
})

Tamom. useEffect yo'q. useState yo'q.

Agar siz hali ham useEffect da ma'lumot olayotgan bo'lsangiz, bir marta React Query-ni sinab ko'ring. Orqaga qaytgingiz kelmaydi.