React useEffect hooki

useEffect hooki sizning componentlaringizda nojo‘ya ta’sirlarni amalga oshirish imkonini beradi.

Nojo‘ya ta’sirlarning ba’zi misollari: ma’lumotlarni olish, DOMni to‘g‘ridan-to‘g‘ri yangilash va taymerlar.

useEffect ikkita argumentni qabul qiladi. Ikkinchi dalil ixtiyoriydir.

useEffect(<function>, <dependency>)

Misol sifatida taymerdan foydalanamiz.

Misol:

Dastlabki renderdan keyin 1 soniyani hisoblash uchun setTimeout() dan foydalaning:

import { useState, useEffect } from 'react';
import { createRoot } from 'react-dom/client';

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

  useEffect(() => {
    setTimeout(() => {
      setCount((count) => count + 1);
    }, 1000);
  });

  return <h1>I've rendered {count} times!</h1>;
}

createRoot(document.getElementById('root')).render(
  <Timer />
);

Misolni ishga tushirish »

Lekin kuting!! U faqat bir marta hisoblashi kerak bo‘lsa ham, hisoblashda davom etadi!

useEffect har bir renderda ishlaydi. Bu shuni anglatadiki, hisoblash o‘zgarganda, render sodir bo‘ladi, bu esa boshqa effektni keltirib chiqaradi.

Bu biz xohlagan narsa emas. Yon ta’sirlar paydo bo‘lganda nazorat qilishning bir necha yo‘li mavjud.

Biz har doim massivni qabul qiladigan ikkinchi parametrni kiritishimiz kerak. Biz ixtiyoriy ravishda ushbu massivda useEffect-ga bog‘liqliklarni o‘tkazishimiz mumkin.

Misol

1. Hech qanday bog‘liqlik (dependency) uzatilmadi:

useEffect(() => {
  //Runs on every render
});

Misol

2. Bo‘sh massiv:

useEffect(() => {
  //Runs only on the first render
}, []);

Misol

3. Props yoki state qiymatlari:

useEffect(() => {
  //Runs on the first render
  //And any time any dependency value changes
}, [prop, state]);

Shunday qilib, bu muammoni hal qilish uchun keling, ushbu effektni faqat dastlabki renderda ishlataylik.

Misol:

Effektni faqat dastlabki renderda ishga tushiring:

import { useState, useEffect } from 'react';
import { createRoot } from 'react-dom/client';

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

  useEffect(() => {
    setTimeout(() => {
      setCount((count) => count + 1);
    }, 1000);
  }, []); // <- add empty brackets here

  return <h1>I've rendered {count} times!</h1>;
}

createRoot(document.getElementById('root')).render(
  <Timer />
);

Misolni ishga tushirish »

Misol:

Mana o‘zgaruvchiga bog‘liq useEffect Hook misoli. Agar count o‘zgaruvchisi yangilansa, effekt yana ishga tushadi:

import { useState, useEffect } from 'react';
import { createRoot } from 'react-dom/client';

function Counter() {
  const [count, setCount] = useState(0);
  const [calculation, setCalculation] = useState(0);

  useEffect(() => {
    setCalculation(() => count * 2);
  }, [count]); // <- add the count variable here

  return (
    <>
      <p>Count: {count}</p>
      <button onClick={() => setCount((c) => c + 1)}>+</button>
      <p>Calculation: {calculation}</p>
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <Counter />
);

Misolni ishga tushirish »

Agar bir nechta bog‘liqliklar mavjud bo‘lsa, ular useEffect bog‘liqliklar massiviga (dependency array) kiritilishi kerak.

Effektni tozalash

Ba’zi effektlar xotira oqishini kamaytirish uchun tozalashni talab qiladi.

Vaqt tugashi, obunalar, voqea tinglovchilari va endi kerak bo‘lmagan boshqa effektlar yo‘q qilinishi kerak.

Biz buni useEffect Hook oxiriga qaytarish funksiyasini kiritish orqali qilamiz.

Misol:

useEffect hooki oxiridagi taymerni tozalang:

import { useState, useEffect } from 'react';
import { createRoot } from 'react-dom/client';

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

  useEffect(() => {
    let timer = setTimeout(() => {
      setCount((count) => count + 1);
    }, 1000);

    return () => clearTimeout(timer)
  }, []);

  return <h1>I've rendered {count} times!</h1>;
}

createRoot(document.getElementById('root')).render(
  <Timer />
);

Misolni ishga tushirish »

Eslatma: Taymerni tozalash uchun biz uni nomlashimiz kerak edi.

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish