useEffect() hook

useEffect() ham useState() kabi biror bir funksiya ichida bo'lmaydi va u biror bir o'zgaruvchiga tenglanmaydi.

useEffect() ichida 2 ta parametr bo'ladi:

callback funksiya
dependency array

useEffect( () => (), [] )

useEffect(()=> { console.log(1) }, []);

Komponent bir marta ishga tushganda useEffect ichidagi funksiya ham bir marta ishga tushadi va boshqa ishga tushmaydi

usEffect() ichiga funksiya joylaymiz

useEffect(() => { fetch("http://localhost:3000/trips") .then((res) => res.json()) .then((data) => setTrips(data)); }, []);

Yana qoidani qaytaramiz. "useEffect() ichidagi callback funksiya agar dependency array bo'sh bo'lsa komponent ishga tushganda bir marta ishlaydi va boshqa ishlamaydi".

Manba: https://www.youtube.com/watch?v=OzbhAWIY5ts&list=PLNS3PujVHR-awWJYJ74hFbgt8cHeTCC_b&index=38

useEffect() ichidagi callback funksiya komponent bir marta ishga tushganda bir marta ishlaydi va boshqa ishlamaydi. Bunga sabab uning ichidagi dependency array!

const [trips, setTrips] = useState([]); const [url, setUrl] = useState("http://localhost:3000/trips"); console.log(trips);

useEffect(() => { fetch(url) .then((res) => res.json()) .then((data) => setTrips(data));
}, []);

Bizda yangi qoida: Agar biz tashqi tomondan useEffect() ichiga nimadir olib kirsak uni ham albatta useEffect() ichidagi dependency arrayga yozib qo'yishimiz kerak

Endi bizda url bor va qachonki url o'zgarsa unda yana useEffect() ishga tushadi.

Qaytaramiz, agar dependency array bo'sh bo'lsa komponent ishga tushganda useEffect() ichidagi callback funksiya bir marta ishlab berardi. Endi tashqaridan nimadir olib kirdik va uni useEffect() ichiga yozdik.

Endi useState() o'zgarganda useEffect() ichidagi callback funksiya yana bir bor ishlab beradi.