useEffect

React useEffect Hooks

useEffect Hook sizga komponentlaringizda yon ta'sirlarni bajarishga imkon beradi.

Yon ta'sirlarning ba'zi misollari: ma'lumotlarni olish, DOM-ni bevosita yangilash, va vaqt o'lchagichlar.

useEffect ikkita argumentni qabul qiladi. Ikkinchi argument ixtiyoriy.

useEffect(<funksiya>, <qaramlik>)

Keling, vaqt o'lchagichni misol sifatida ko'rib chiqamiz.

Misol

setTimeout() yordamida dastlabki renderdan 1 soniya o'tgach sanash:

import { useState, useEffect } from 'react';
import ReactDOM from 'react-dom/client';
 
function Timer() {
  const [count, setCount] = useState(0);
 
  useEffect(() => {
    setTimeout(() => {
      setCount((count) => count + 1);
    }, 1000);
  });
 
  return <h1>Men {count} marta render qildim!</h1>;
}
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Timer />);

Ammo kuting!! U sanashni davom ettiradi, garchi faqat bir marta sanashi kerak edi!

useEffect har bir renderda ishlaydi. Demak, count o'zgarganda render yuz beradi, bu esa boshqa ta'sirni ishga tushiradi.

Bu biz xohlagan holat emas. Yon ta'sirlarning qachon ishlashini nazorat qilishning bir necha yo'li mavjud.

Har doim ikkinchi parametrni kiritishimiz kerak, bu parametr massivni qabul qiladi. Bu massivga ixtiyoriy ravishda useEffect-ga qaramliklarni uzatishimiz mumkin.

Misollar

Hech qanday qaramlik uzatilmagan:

useEffect(() => {
  // Har bir renderda ishlaydi
});

Bo'sh massiv:

useEffect(() => {
  // Faqat birinchi renderda ishlaydi
}, []);

Props yoki holat qiymatlari:

useEffect(() => {
  // Birinchi renderda ishlaydi
  // Va qaramlik qiymatlari o'zgarganida har doim
}, [prop, state]);

Shunday qilib, bu muammoni hal qilish uchun faqat dastlabki renderda bu ta'sirni ishga tushiramiz.

Misol

Faqat dastlabki renderda ta'sirni ishga tushiring:

import { useState, useEffect } from 'react';
import ReactDOM from 'react-dom/client';
 
function Timer() {
  const [count, setCount] = useState(0);
 
  useEffect(() => {
    setTimeout(() => {
      setCount((count) => count + 1);
    }, 1000);
  }, []); // <- bu yerga bo'sh qavsni qo'shing
 
  return <h1>Men {count} marta render qildim!</h1>;
}
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Timer />);

Misol

Agar count o'zgaruvchisi yangilansa, ta'sir yana ishga tushadi:

import { useState, useEffect } from 'react';
import ReactDOM from 'react-dom/client';
 
function Counter() {
  const [count, setCount] = useState(0);
  const [calculation, setCalculation] = useState(0);
 
  useEffect(() => {
    setCalculation(() => count * 2);
  }, [count]); // <- bu yerga count o'zgaruvchisini qo'shing
 
  return (
    <>
      <p>Sanash: {count}</p>
      <button onClick={() => setCount((c) => c + 1)}>+</button>
      <p>Hisoblash: {calculation}</p>
    </>
  );
}
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Counter />);

Agar bir nechta qaramlik bo'lsa, ularni useEffect qaramliklar massiviga kiritish kerak.

Ta'sirni Tozalash

Ba'zi ta'sirlar xotira oqishini kamaytirish uchun tozalanishi kerak.

Vaqt o'lchagichlar, obuna bo'lish, hodisa tinglovchilar va boshqa kerak bo'lmaydigan ta'sirlar chiqarilishi kerak.

Buni useEffect Hook oxirida qaytish funksiyasini qo'shish orqali amalga oshiramiz.

Misol

useEffect Hook oxirida vaqt o'lchagichni tozalang:

import { useState, useEffect } from 'react';
import ReactDOM 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>Men {count} marta render qildim!</h1>;
}
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Timer />);

E'tibor bering: Vaqt o'lchagichni tozalash uchun uni nomlashimiz kerak edi.

React useEffect Hooks

Misol

Misollar

Misol

Misol

Ta'sirni Tozalash

Misol

Ushbu sahifada