كيف اتفادى تنبيه ESLint في React عند استخدام useEffect Hook مع مصفوفة DependencyList فارغة ؟

بإمكانك تعطيل ذلك التحذير مؤقتًا باستخدام تعليق eslint-disable-next-line فوق السطر الذي يولد التحذير، كالتالي:

useEffect(() => {
  // eslint-disable-next-line react-hooks/exhaustive-deps
  // الكود الخاص بك هنا
}, []);

أو إنشاء ملف باسم

 .eslintrc

  في مجلد المشروع ثم وضع التالي به:

{
  "plugins": ["react"],
  "rules": {
    "react-hooks/exhaustive-deps": [
      "error",
      {
        "additionalHooks": ["useEffect"],
        "dependency-array-exclusions": ["[]"]
      }
    ]
  }
}

حيث تستخدم خاصية dependency-array-exclusions في ESLint لتستثني بعض المصفوفات من التحقق، وتستطيع استخدام تلك الخاصية لاستثناء المصفوفة الفارغة من التحقق، بحيث لا يصدر ESLint أي تنبيهات.

وإن لم يعمل حاول تجربة الإعداد التالي:

{
  "rules": {
    "react-hooks/exhaustive-deps": "off"
  }
}

حاول تعطيل قاعدة react-hooks/exhaustive-deps لجميع الملفات في مشروعك أو لملفات معينة.

عن طريق إنشاء ملف .eslintrc.json في الجذر الرئيسي لمشروعك 

ثم إضافة الكود التالي

{
"overrides": [
    {
        "files": ["**/*.js"],
        "rules": {
            "react-hooks/exhaustive-deps": "off"
        }
    }
]
}