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

برای اینکه یه تابع توی 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 بشه.