eslint-plugin-react-hooks

يوفر eslint-plugin-react-hooks قواعد ESLint لفرض قواعد React.

يساعدك هذا الإضافة على اكتشاف انتهاكات قواعد React في وقت البناء، مما يضمن أن مكوناتك و hooks تتبع قواعد React للصحة والأداء. تغطي عمليات lint كلاً من أنماط React الأساسية (exhaustive-deps و rules-of-hooks) والمشاكل التي يبلغ عنها React Compiler. يتم عرض تشخيصات React Compiler تلقائيًا بواسطة إضافة ESLint هذه، ويمكن استخدامها حتى لو لم يتبنى تطبيقك المُجمّع بعد.

ملاحظة

عندما يبلغ المُجمّع عن تشخيص، فهذا يعني أن المُجمّع كان قادرًا على اكتشاف نمط بشكل ثابت غير مدعوم أو يخرق قواعد React. عندما يكتشف ذلك، فإنه تلقائيًا يتخطى تلك المكونات و hooks، مع الحفاظ على بقية تطبيقك مُجمّع. هذا يضمن التغطية المثلى للتحسينات الآمنة التي لن تكسر تطبيقك.

ما يعنيه هذا بالنسبة لـ linting، هو أنك لا تحتاج إلى إصلاح جميع الانتهاكات فورًا. عالجها بوتيرتك الخاصة لزيادة عدد المكونات المُحسّنة تدريجيًا.

القواعد الموصى بها

يتم تضمين هذه القواعد في الإعداد المسبق recommended في eslint-plugin-react-hooks:

exhaustive-deps - يتحقق من أن مصفوفات التبعية لـ React hooks تحتوي على جميع التبعيات الضرورية
rules-of-hooks - يتحقق من أن المكونات و hooks تتبع قواعد Hooks
component-hook-factories - يتحقق من دوال الترتيب الأعلى التي تعرّف مكونات أو hooks متداخلة
config - يتحقق من خيارات تكوين المُجمّع
error-boundaries - يتحقق من استخدام Error Boundaries بدلاً من try/catch لأخطاء الأطفال
gating - يتحقق من تكوين وضع gating
globals - يتحقق من عدم التعيين/التعديل للمتغيرات العامة أثناء render
immutability - يتحقق من عدم تعديل props و state والقيم الأخرى غير القابلة للتغيير
incompatible-library - يتحقق من عدم استخدام مكتبات غير متوافقة مع memoization
preserve-manual-memoization - يتحقق من الحفاظ على memoization اليدوية الموجودة بواسطة المُجمّع
purity - يتحقق من أن المكونات/hooks نقية من خلال التحقق من الدوال غير النقية المعروفة
refs - يتحقق من الاستخدام الصحيح لـ refs، وعدم القراءة/الكتابة أثناء render
set-state-in-effect - يتحقق من عدم استدعاء setState بشكل متزامن في effect
set-state-in-render - يتحقق من عدم تعيين state أثناء render
static-components - يتحقق من أن المكونات ثابتة، ولا يتم إعادة إنشائها في كل render
unsupported-syntax - يتحقق من عدم استخدام بناء جملة لا يدعمه React Compiler
use-memo - يتحقق من استخدام hook useMemo بدون قيمة إرجاع

التاليexhaustive-deps

القواعد الموصى بها

يتم تضمين هذه القواعد في الإعداد المسبق recommended في eslint-plugin-react-hooks:

exhaustive-deps - يتحقق من أن مصفوفات التبعية لـ React hooks تحتوي على جميع التبعيات الضرورية

rules-of-hooks - يتحقق من أن المكونات و hooks تتبع قواعد Hooks

component-hook-factories - يتحقق من دوال الترتيب الأعلى التي تعرّف مكونات أو hooks متداخلة

config - يتحقق من خيارات تكوين المُجمّع

error-boundaries - يتحقق من استخدام Error Boundaries بدلاً من try/catch لأخطاء الأطفال

gating - يتحقق من تكوين وضع gating

globals - يتحقق من عدم التعيين/التعديل للمتغيرات العامة أثناء render

immutability - يتحقق من عدم تعديل props و state والقيم الأخرى غير القابلة للتغيير

incompatible-library - يتحقق من عدم استخدام مكتبات غير متوافقة مع memoization

preserve-manual-memoization - يتحقق من الحفاظ على memoization اليدوية الموجودة بواسطة المُجمّع

purity - يتحقق من أن المكونات/hooks نقية من خلال التحقق من الدوال غير النقية المعروفة

refs - يتحقق من الاستخدام الصحيح لـ refs، وعدم القراءة/الكتابة أثناء render

set-state-in-effect - يتحقق من عدم استدعاء setState بشكل متزامن في effect

set-state-in-render - يتحقق من عدم تعيين state أثناء render

static-components - يتحقق من أن المكونات ثابتة، ولا يتم إعادة إنشائها في كل render

unsupported-syntax - يتحقق من عدم استخدام بناء جملة لا يدعمه React Compiler

use-memo - يتحقق من استخدام hook useMemo بدون قيمة إرجاع

eslint-plugin-react-hooks

ملاحظة

القواعد الموصى بها

react@19.2

react-dom@19.2

React Compiler

React DevTools