0
سبد خرید من 0 دوره
سبد خرید شما خالیست :(
پرسش

چطور می‌تونیم یه تابع بارگذاری رو با استفاده از useEffect در React فقط یک بار اجرا کنیم؟

How to call loading function with React useEffect only once

سلام، من دارم از React و hookهای اون استفاده می‌کنم و به مشکلی بر خوردم. می‌خوام یک تابع بارگذاری رو بنویسم که فقط یک بار در طول عمر کامپوننت اجرا بشه. برای این کار از useEffect استفاده می‌کنم، اما نمی‌دونم چطور باید کاری کنم که این تابع فقط یک بار اجرا بشه. کسی می‌تونه کمک کنه؟

پاسخ
محمدامین سعیدی راد
بیوگرافی محمدامین سعیدی راد

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

import React, { useEffect } from 'react';
function MyComponent() {
  useEffect(() => {
      function loadData() {
          console.log('Data loaded');
      }
    loadData();
}, []); // Empty Array !
return <div>My Component</div>;
}
export default MyComponent;

در این مثال، تابع loadData فقط یک بار در هنگام اولین بار رندر شدن کامپوننت MyComponent اجرا میشه. دلیلش هم اینه که آرایه وابستگی که به useEffect داده شده، خالیه و به این معناست که هیچ وابستگی‌ای وجود نداره که باعث اجرای مجدد useEffect بشه.

پاسخ: 1403/06/07
آخرین آپدیت: 1403/08/17