useCallback ()

useEffect() ichida async funksiya ishlatib bo'lmaydi. async ishlata olmagandan keyin await ham ishlatib bo'lmaydi

useEffect() ichida async ishlatishni yo'li esa undan tashqarida async funksiya yaratib useEffect() ichida shu funksiyani chaqirishdir.

async function fetchTrips() { const request = await fetch(url); const data = await request.json(); setTrips(data); }

useEffect(() => { fetchTrips(); }, [url]);

Bizda qoida bor edi. Agar useEffect() ichiga nima olib kirsak, uning ichidagi dependency arrayga ham shuni yozib qo'yish kerak edi.

useEffect(() => { fetchTrips(); }, [fetchTrips]);

Lekin bunday holatda useEffect() fetchTrips() funksiyasini yangi funksiya deb o'ylaydi va komponentni qayta - qayta ishga tushirib yuboradi, cheksiz marta.

Buni oldini olish uchun shunday qilishimiz kerakki useEffect() fetchTrips() funksiyasini yangi funksiya deb o'ylamasin.

Buning uchun bizga useCallback() nomli funksiya kerak bo'ladi. Uni ham import qilamiz.

useCallback() ni vazifasi - memorize qilish. Ya'ni u funksiyalarni xotiraga saqlaydi.

const fetchTrips = useCallback(async () => { const request = await fetch(url); const data = await request.json(); setTrips(data); }, [url]);

useCallback() hook bilan fetchTrips funksiyasi body qismini o'rab qo'yamiz.