“useEffect” در عمق

useEffect برای چیست؟

useEffect در react 16.8 معرفی شد، قبل از انتشار این نسخه، توسعه دهندگان react از componentDidMount و componentWillUnmount استفاده می کردند.
قلاب useEffect یک قلاب داخلی React است که به شما امکان می دهد عوارض جانبی را در اجزای عملکردی اجرا کنید. این عوارض جانبی اقداماتی هستند که مستقیماً بر رابط کاربری تأثیر نمی‌گذارند، اما می‌توانند شامل مواردی مانند واکشی داده، افزودن شنوندگان رویداد و غیره باشند.

چرا useEffect دو آرگومان را می پذیرد؟

به دو آرگومان نیاز دارد، آرگومان اول تابعی است که حاوی کد اثر جانبی است که می‌خواهید اجرا کنید و آرگومان دوم که اختیاری است این است که چند بار می‌خواهیم اجرا شود.

مثال اول

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

function Timer() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setTime(prevTime => prevTime + 1);
    }, 1000);
  }, []);

  return <div>{time} seconds have passed.</div>;
}

در مثال بالا فقط یک بار پس از نصب کامپوننت اجرا می شود.

مثال دوم

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

function Timer() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setTime(prevTime => prevTime + 1);
    }, 1000);
  }, [time]); 

  return <div>{time} seconds have passed.</div>;
}

در مثال بالا می‌توانیم ببینیم که چگونه آرگومان دوم را پاس کردم، بنابراین هر بار که «زمان» تغییر می‌کند، آن را ارائه می‌کند.

پاکسازی در useEffect؟

این چیزی است که همیشه مورد استفاده قرار نمی گیرد یا حتی آموزش داده نمی شود، اما در واقع برای کارآمدی زمان و نشت حافظه بسیار مهم است.
ما باید پاکسازی را در useEffect اجرا کنیم تا از نشت حافظه در برنامه خود جلوگیری کنیم که می تواند باعث کندتر شدن برنامه ما شود.

مثال با پاکسازی

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

function Timer() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setTime(prevTime => prevTime + 1);
    }, 1000);

    return () => {
      clearInterval(intervalId);
    };
  }, [time]);

  return <div>{time} seconds have passed.</div>;
}

در مثال بالا می بینیم که من یک بازگشت اضافه کردم که یک clearInterval برمی گرداند که پاکسازی را با intervalId انجام می دهد و از نشت حافظه در برنامه خود جلوگیری می کنیم.

امیدوارم کسی این مفید را پیدا کرده باشد و اگر سؤالی دارید و خوشحال می شود به آنها پاسخ دهد.

لائوتارو.