React useEffect'ni o'zlashtirish: Yon effektlarni boshqarish shablonlari bo'yicha to'liq qo'llanma

            import React, { useEffect, useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // Bu yon effekt funksiyasi
    console.log('Komponent render qilindi yoki count o\'zgardi:', count);

    // Ixtiyoriy tozalash funksiyasi
    return () => {
      console.log('count uchun tozalash:', count);
    };
  }, [count]); // Bog'liqliklar massivi

  return (
    <div>
      <p>Hisob: {count}</p>
      <button onClick={() => setCount(count + 1)}>Oshirish</button>
    </div>
  );
}

            

              
                Copy
              
            
          

            useEffect(() => {
  const subscription = subscribeToChat(props.chatId);

  return () => {
    // Tozalash: chatId o'zgarganda yoki komponent unmount bo'lganda obunani bekor qilish
    unsubscribeFromChat(subscription);
  };
}, [props.chatId]);

            

              
                Copy
              
            
          

            import React, { useEffect, useState } from 'react';

function UserProfile() {
  const [userData, setUserData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchUserData = async () => {
      try {
        const response = await fetch('https://api.example.com/users/1');
        if (!response.ok) {
          throw new Error(`HTTP xatosi! status: ${response.status}`);
        }
        const data = await response.json();
        setUserData(data);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchUserData();
  }, []); // Bo'sh massiv bu faqat mount paytida bir marta ishlashini ta'minlaydi

  if (loading) return <p>Foydalanuvchi ma'lumotlari yuklanmoqda...</p>;
  if (error) return <p>Xato: {error.message}</p>;
  if (!userData) return <p>Foydalanuvchi ma'lumotlari topilmadi.</p>;

  return (
    <div>
      <h2>{userData.name}</h2>
      <p>Email: {userData.email}</p>
      <p>Joylashuv: {userData.location}</p>
    </div>
  );
}

            

              
                Copy
              
            
          

            import React, { useEffect, useState } from 'react';

function UserPosts({ userId }) {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    if (!userId) { // userId boshida undefined bo'lishi mumkin bo'lgan holatlarni hisobga oling
      setPosts([]);
      setLoading(false);
      return;
    }

    const fetchUserPosts = async () => {
      setLoading(true);
      setError(null);
      try {
        const response = await fetch(`https://api.example.com/users/${userId}/posts`);
        if (!response.ok) {
          throw new Error(`HTTP xatosi! status: ${response.status}`);
        }
        const data = await response.json();
        setPosts(data);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchUserPosts();
  }, [userId]); // userId o'zgarganda qayta ma'lumot oling

  if (loading) return <p>Postlar yuklanmoqda...</p>;
  if (error) return <p>Xato: {error.message}</p>;
  if (posts.length === 0) return <p>Ushbu foydalanuvchi uchun postlar topilmadi.</p>;

  return (
    <div>
      <h3>Foydalanuvchi {userId} postlari</h3>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

            

              
                Copy
              
            
          

            import React, { useEffect, useState } from 'react';

function ProductDetails({ productId }) {
  const [product, setProduct] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const controller = new AbortController();
    const signal = controller.signal;

    const fetchProduct = async () => {
      setLoading(true);
      setError(null);
      setProduct(null); // Oldingi mahsulot ma'lumotlarini tozalash

      try {
        const response = await fetch(`https://api.example.com/products/${productId}`, { signal });
        if (!response.ok) {
          throw new Error(`HTTP xatosi! status: ${response.status}`);
        }
        const data = await response.json();
        setProduct(data);
      } catch (err) {
        if (err.name === 'AbortError') {
          console.log('So\'rov bekor qilindi');
        } else {
          setError(err);
        }
      } finally {
        setLoading(false);
      }
    };

    fetchProduct();

    return () => {
      // Komponent unmount bo'lganda yoki productId o'zgarganda davom etayotgan so'rovni bekor qilish
      controller.abort();
    };
  }, [productId]);

  if (loading) return <p>Mahsulot tafsilotlari yuklanmoqda...</p>;
  if (error) return <p>Xato: {error.message}</p>;
  if (!product) return <p>Mahsulot topilmadi.</p>;

  return (
    <div>
      <h2>{product.name}</h2>
      <p>Narx: ${product.price}</p>
      <p>Tavsif: {product.description}</p>
    </div>
  );
}

            

              
                Copy
              
            
          

            import React, { useEffect, useState } from 'react';

function WindowSizeLogger() {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  useEffect(() => {
    const handleResize = () => {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    };

    window.addEventListener('resize', handleResize);

    return () => {
      // Komponent unmount bo'lganda hodisa tinglovchisini tozalash
      window.removeEventListener('resize', handleResize);
    };
  }, []); // Bo'sh massiv: tinglovchini faqat mount/unmount paytida bir marta qo'shish/olib tashlash

  return (
    <div>
      <p>Oyna Kengligi: {windowSize.width}px</p>
      <p>Oyna Balandligi: {windowSize.height}px</p>
    </div>
  );
}

            

              
                Copy
              
            
          

            import React, { useEffect, useState } from 'react';
// chatService subscribe/unsubscribe metodlarini taqdim etuvchi tashqi modul deb faraz qilamiz
import { chatService } from './chatService'; 

function ChatRoom({ roomId }) {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    const handleNewMessage = (message) => {
      setMessages((prevMessages) => [...prevMessages, message]);
    };

    const subscription = chatService.subscribe(roomId, handleNewMessage);

    return () => {
      chatService.unsubscribe(subscription);
    };
  }, [roomId]); // Agar roomId o'zgarsa, qayta obuna bo'lish

  return (
    <div>
      <h3>Chat Xonasi: {roomId}</h3>
      <div className="messages">
        {messages.length === 0 ? (
          <p>Hali xabarlar yo'q.</p>
        ) : (
          messages.map((msg, index) => (
            <p key={index}><strong>{msg.sender}:</strong> {msg.text}</p>
          ))
        )}
      </div>
    </div>
  );
}

            

              
                Copy
              
            
          

            import React, { useEffect } from 'react';

function PageTitleUpdater({ title }) {
  useEffect(() => {
    document.title = `Mening Ilovam | ${title}`;
  }, [title]); // 'title' prop o'zgarganda sarlavhani yangilash

  return (
    <h2>{title} Sahifasiga Xush Kelibsiz!</h2>
  );
}

            

              
                Copy
              
            
          

            import React, { useEffect, useRef } from 'react';
import Chart from 'chart.js/auto'; // Chart.js o'rnatilgan deb faraz qilinadi

function MyChartComponent({ data, labels }) {
  const chartRef = useRef(null); // canvas elementini ushlab turish uchun ref
  const chartInstance = useRef(null); // diagramma nusxasini ushlab turish uchun ref

  useEffect(() => {
    if (chartRef.current) {
      // Yangi diagramma yaratishdan oldin mavjud diagramma nusxasini yo'q qilish
      if (chartInstance.current) {
        chartInstance.current.destroy();
      }

      const ctx = chartRef.current.getContext('2d');
      chartInstance.current = new Chart(ctx, {
        type: 'bar',
        data: {
          labels: labels,
          datasets: [{
            label: 'Sotuvlar Ma\'lumotlari',
            data: data,
            backgroundColor: 'rgba(75, 192, 192, 0.6)',
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 1
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
        }
      });
    }

    return () => {
      // Tozalash: unmount paytida diagramma nusxasini yo'q qilish
      if (chartInstance.current) {
        chartInstance.current.destroy();
      }
    };
  }, [data, labels]); // ma'lumotlar yoki yorliqlar o'zgarsa, diagrammani qayta render qilish

  return (
    <div style={{ width: '600px', height: '400px' }}>
      <canvas ref={chartRef}></canvas>
    </div>
  );
}

            

              
                Copy
              
            
          

            import React, { useEffect, useState } from 'react';

function CountdownTimer({ initialSeconds }) {
  const [seconds, setSeconds] = useState(initialSeconds);

  useEffect(() => {
    if (seconds <= 0) return; // Nolga yetganda taymerni to'xtatish

    const timerId = setInterval(() => {
      setSeconds(prevSeconds => prevSeconds - 1);
    }, 1000);

    return () => {
      // Tozalash: komponent unmount bo'lganda yoki soniyalar 0 bo'lganda intervalni tozalash
      clearInterval(timerId);
    };
  }, [seconds]); // Agar initialSeconds o'zgarsa, yangi intervalni sozlash uchun soniyalar o'zgarganda effektni qayta ishga tushirish

  return (
    <div>
      <h3>Ortga sanash: {seconds} soniya</h3>
      {seconds === 0 && <p>Vaqt tugadi!</p>}
    </div>
  );
}

            

              
                Copy
              
            
          

            import React, { useEffect, useState } from 'react';

function StaleClosureExample() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // Bu effekt 2 soniyadan keyin hisobni logga chiqarmoqchi.
    // Agar count shu 2 soniya ichida o'zgarsa, bu ESKI hisobni logga chiqaradi!
    const timer = setTimeout(() => {
      console.log('Eskirgan hisob:', count); 
    }, 2000);

    return () => {
      clearTimeout(timer);
    };
  }, []); // Muammo: 'count' bog'liqliklarda yo'q, shuning uchun u eskirgan

  return (
    <div>
      <p>Hisob: {count}</p>
      <button onClick={() => setCount(count + 1)}>Oshirish</button>
    </div>
  );
}

            

              
                Copy
              
            
          

            import React, { useEffect, useState } from 'react';

function FixedClosureExample() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setTimeout(() => {
      console.log('To\'g\'ri hisob:', count);
    }, 2000);

    return () => {
      clearTimeout(timer);
    };
  }, [count]); // Yechim: 'count' endi bog'liqlik. Effekt count o'zgarganda qayta ishlaydi.

  return (
    <div>
      <p>Hisob: {count}</p>
      <button onClick={() => setCount(count + 1)}>Oshirish</button>
    </div>
  );
}

            

              
                Copy
              
            
          

            import React, { useEffect, useState } from 'react';

function AutoIncrementer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCount(prevCount => prevCount + 1); // Funksional yangilanish
    }, 1000);

    return () => clearInterval(interval);
  }, []); // 'count' bog'liqlik emas, chunki biz funksional yangilanishdan foydalanamiz

  return <p>Hisob: {count}</p>;
}

            

              
                Copy
              
            
          

            import React, { useEffect, useRef, useState } from 'react';

function LatestValueLogger() {
  const [count, setCount] = useState(0);
  const latestCountRef = useRef(count); // ref yaratish

  // Ref'ning joriy qiymatini eng so'nggi hisob bilan yangilab turish
  useEffect(() => {
    latestCountRef.current = count;
  }, [count]);

  useEffect(() => {
    const interval = setInterval(() => {
      // Eng so'nggi hisobga ref orqali kirish, eskirgan closure'dan qochish
      console.log('Eng so\'nggi hisob:', latestCountRef.current);
    }, 2000);

    return () => clearInterval(interval);
  }, []); // Bo'sh bog'liqliklar massivi, chunki biz bu yerda 'count'ni bevosita ishlatmayapmiz

  return (
    <div>
      <p>Hisob: {count}</p>
      <button onClick={() => setCount(count + 1)}>Oshirish</button>
    </div>
  );
}

            

              
                Copy
              
            
          

            import React, { useEffect, useState } from 'react';

function UserSettings() {
  const [userId, setUserId] = useState(1);
  const [settings, setSettings] = useState({});

  const fetchSettings = async () => {
    // Bu funksiya har bir renderda qayta yaratiladi
    console.log('Foydalanuvchi sozlamalari olinmoqda:', userId);
    const response = await fetch(`https://api.example.com/users/${userId}/settings`);
    const data = await response.json();
    setSettings(data);
  };

  useEffect(() => {
    fetchSettings();
  }, [fetchSettings]); // Muammo: fetchSettings har bir renderda o'zgaradi

  return (
    <div>
      <p>Foydalanuvchi IDsi: {userId}</p>
      <button onClick={() => setUserId(userId + 1)}>Keyingi Foydalanuvchi</button>
      <pre>{JSON.stringify(settings, null, 2)}</pre>
    </div>
  );
}

            

              
                Copy
              
            
          

            import React, { useEffect, useState, useCallback } from 'react';

function UserSettingsOptimized() {
  const [userId, setUserId] = useState(1);
  const [settings, setSettings] = useState({});

  const fetchSettings = useCallback(async () => {
    console.log('Foydalanuvchi sozlamalari olinmoqda:', userId);
    const response = await fetch(`https://api.example.com/users/${userId}/settings`);
    const data = await response.json();
    setSettings(data);
  }, [userId]); // fetchSettings faqat userId o'zgarganda o'zgaradi

  useEffect(() => {
    fetchSettings();
  }, [fetchSettings]); // Endi fetchSettings barqaror bog'liqlik

  return (
    <div>
      <p>Foydalanuvchi IDsi: {userId}</p>
      <button onClick={() => setUserId(userId + 1)}>Keyingi Foydalanuvchi</button>
      <pre>{JSON.stringify(settings, null, 2)}</pre>
    </div>
  );
}

            

              
                Copy
              
            
          

            import React, { useEffect, useMemo, useState } from 'react';

function ProductList({ categoryId, sortBy }) {
  const [products, setProducts] = useState([]);

  // Filtr/saralash mezonlari ob'ektini memoizatsiya qilish
  const fetchCriteria = useMemo(() => ({
    category: categoryId,
    sort: sortBy,
  }), [categoryId, sortBy]);

  useEffect(() => {
    // fetchCriteria asosida mahsulotlarni olish
    console.log('Mezonlar bilan mahsulotlar olinmoqda:', fetchCriteria);
    // ... API so'rovi mantig'i ...
  }, [fetchCriteria]); // Effekt faqat categoryId yoki sortBy o'zgarganda ishlaydi

  return (
    <div>
      <h3>{categoryId} Kategoriyasidagi Mahsulotlar ({sortBy} bo'yicha saralangan)</h3>
      <!-- Mahsulotlar ro'yxatini render qilish -->
    </div>
  );
}

            

              
                Copy
              
            
          

            import React, { useEffect, useState } from 'react';

function InfiniteLoopExample() {
  const [data, setData] = useState([]);

  useEffect(() => {
    // Bu cheksiz tsiklga olib keladi!
    // setData qayta renderga sabab bo'ladi, bu esa effektni qayta ishga tushiradi, u esa yana setData'ni chaqiradi.
    setData([1, 2, 3]); 
  }, [data]); // 'data' bog'liqlik, va biz har doim yangi massiv havolasini o'rnatyapmiz

  return <p>Ma'lumotlar uzunligi: {data.length}</p>;
}

            

              
                Copy
              
            
          

            import React, { useEffect, useState } from 'react';

function CorrectDataSetup() {
  const [data, setData] = useState([]);

  useEffect(() => {
    // Bu faqat mount paytida bir marta ishlaydi
    setData([1, 2, 3]); 
  }, []); // Bo'sh massiv qayta ishga tushirishni oldini oladi

  return <p>Ma'lumotlar uzunligi: {data.length}</p>;
}

            

              
                Copy
              
            
          

            import React, { useEffect, useState } from 'react';

function UserDashboard({ userId }) {
  const [profile, setProfile] = useState(null);
  const [activityLog, setActivityLog] = useState([]);

  // Foydalanuvchi profilini olish uchun effekt (faqat userId'ga bog'liq)
  useEffect(() => {
    const fetchProfile = async () => {
      // ... profil ma'lumotlarini olish ...
      console.log('Profil olinmoqda:', userId);
      const response = await fetch(`https://api.example.com/users/${userId}/profile`);
      const data = await response.json();
      setProfile(data);
    };
    fetchProfile();
  }, [userId]);

  // Faoliyat jurnalini olish uchun effekt (shuningdek, userId'ga bog'liq, lekin alohida vazifa)
  useEffect(() => {
    const fetchActivity = async () => {
      // ... faoliyat ma'lumotlarini olish ...
      console.log('Faoliyat olinmoqda:', userId);
      const response = await fetch(`https://api.example.com/users/${userId}/activity`);
      const data = await response.json();
      setActivityLog(data);
    };
    fetchActivity();
  }, [userId]);

  return (
    <div>
      <h2>Foydalanuvchi Paneli: {userId}</h2>
      <h3>Profil:</h3>
      <pre>{JSON.stringify(profile, null, 2)}</pre>
      <h3>Faoliyat Jurnali:</h3>
      <pre>{JSON.stringify(activityLog, null, 2)}</pre>
    </div>
  );
}

            

              
                Copy
              
            
          

            import React, { useEffect, useState } from 'react';

// Maxsus Hook: useFetch.js
function useFetch(url, dependencies = []) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const abortController = new AbortController();
    const signal = abortController.signal;

    const fetchData = async () => {
      setLoading(true);
      setError(null);
      try {
        const response = await fetch(url, { signal });
        if (!response.ok) {
          throw new Error(`HTTP xatosi! status: ${response.status}`);
        }
        const result = await response.json();
        setData(result);
      } catch (err) {
        if (err.name === 'AbortError') {
          console.log('So\'rov bekor qilindi');
        } else {
          setError(err);
        }
      } finally {
        setLoading(false);
      }
    };

    fetchData();

    return () => {
      abortController.abort();
    };
  }, [url, ...dependencies]); // URL yoki qo'shimcha bog'liqlik o'zgarsa qayta ishga tushirish

  return { data, loading, error };
}

// Maxsus hook'dan foydalanuvchi komponent: UserDataDisplay.js
function UserDataDisplay({ userId }) {
  const { data: userData, loading, error } = useFetch(
    `https://api.example.com/users/${userId}`,
    [userId] // userId'ni maxsus hook'ga bog'liqlik sifatida o'tkazish
  );

  if (loading) return <p>Foydalanuvchi ma'lumotlari yuklanmoqda...</p>;
  if (error) return <p>Xato: {error.message}</p>;
  if (!userData) return <p>Foydalanuvchi ma'lumotlari yo'q.</p>;

  return (
    <div>
      <h2>{userData.name}</h2>
      <p>Email: {userData.email}</p>
    </div>
  );
}
```

function ProductCalculator({ price, quantity }) {
  const [total, setTotal] = useState(0);

  useEffect(() => {
    setTotal(price * quantity); // Keraksiz effekt
  }, [price, quantity]);

  return <p>Jami: ${total.toFixed(2)}</p>;
}

            

              
                Copy