useEffect asoslari

Side effect nima

Side effect — bu component'ingizning JSX'ni hisoblash va qaytarishdan tashqari qiladigan har qanday ishi — kengroq dunyoga tegish uchun React'dan tashqariga chiqish. Misollar: serverdan ma'lumot olish, timer o'rnatish, biror narsaga obuna bo'lish yoki sahifa sarlavhasini yangilash. React ularni oddiy render paytida boshqara olmaydi, shuning uchun ular uchun maxsus vosita bor: useEffect hook.

useEffect shakli

useEffect ishga tushirish uchun function va uni qachon ishga tushishini boshqaradigan dependency array'ni qabul qiladi.

import { useEffect } from "react";
 
useEffect(() => {
  // your side effect goes here
}, []);

Array muhim qismi. U effect bog'liq bo'lgan qiymatlarni sanab o'tadi va React ulardan biri o'zgarganda effect'ni qayta ishga tushiradi. Uch holat:

useEffect(() => { /* ... */ });          // no array: runs after EVERY render
useEffect(() => { /* ... */ }, []);      // empty array: runs ONCE, on mount
useEffect(() => { /* ... */ }, [count]); // runs when `count` changes

"On mount" component ekranda birinchi marta paydo bo'lishini anglatadi. Bo'sh [] faqat bir marta sodir bo'lishi kerak bo'lgan sozlash uchun eng keng tarqalgan holat.

Cleanup, qisqacha

Ba'zi effectlar tozalashni talab qiladi — timer'ni to'xtatish yoki listener'ni olib tashlash — shunda ular component ketgandan keyin ishlashda davom etmaydi. Agar effect'ingiz function qaytarsa, React uni keyingi ishga tushishdan oldin va component olib tashlanganda cleanup sifatida ishga tushiradi.

useEffect(() => {
  const id = setInterval(() => console.log("tick"), 1000);
 
  return () => clearInterval(id); // cleanup: stop the timer
}, []);

Har bir effect cleanup'ni talab qilmaydi, lekin timerlar va obunalar deyarli har doim talab qiladi. Buni bu yerda o'tkazib yuborish timer'ni abadiy ishlaydigan holatda qoldiradi — klassik memory leak.

Mount'da ma'lumot olish

Juda keng tarqalgan foydalanish: component birinchi marta paydo bo'lganda bir marta ma'lumot yuklash. Natijani saqlash uchun useEffect'ni useState bilan birlashtiring.

import { useState, useEffect } from "react";
 
function Posts() {
  const [posts, setPosts] = useState([]);
 
  useEffect(() => {
    async function load() {
      const response = await fetch("https://api.example.com/posts");
      const data = await response.json

Bo'sh [] fetch faqat mount'da ishga tushishini anglatadi, har bir renderda emas — bu esa cheksiz so'rov loop'iga sabab bo'lardi. Ichidagi yordamchi async function'ga e'tibor bering: effect callback'ining o'zi async bo'la olmaydi, shuning uchun uni aniqlaysiz va chaqirasiz.

Suhbat maslahatlari

• Side effect'ni renderdan tashqari har qanday narsa deb ta'riflang — fetching, timerlar, obunalar — va useEffect uning joyi ekanligini ayting.
• Dependency array'ni tushuntiring: [] mount'da bir marta ishlaydi, [x] x o'zgarganda qayta ishlaydi, arraysiz esa har renderda ishlaydi.
• Timerlar/obunalar uchun cleanup function qaytarishni va nima uchun fetching cheksiz loop'dan qochish uchun []'ga muhtoj ekanligini eslatib o'ting.