docs(ar): translate eslint-plugin-react-hooks, react-dom hooks/static, legacy

Made-with: Cursor

Author: hamdymohamedak

src/content/reference/eslint-plugin-react-hooks/index.md

@@ -5,36 +5,36 @@ version: rc
 
 <Intro>
 
-`eslint-plugin-react-hooks` provides ESLint rules to enforce the [Rules of React](/reference/rules).
+`eslint-plugin-react-hooks` يوفّر قواعد ESLint لتطبيق [قواعد React](/reference/rules).
 
 </Intro>
 
-This plugin helps you catch violations of React's rules at build time, ensuring your components and hooks follow React's rules for correctness and performance. The lints cover both fundamental React patterns (exhaustive-deps and rules-of-hooks) and issues flagged by React Compiler. React Compiler diagnostics are automatically surfaced by this ESLint plugin, and can be used even if your app hasn't adopted the compiler yet.
+تساعدك الإضافة على اكتشاف مخالفات قواعد React وقت البناء، لتلتزم المكوّنات والـ hooks بقواعد الصحة والأداء. تغطي التحذيرات أنماط React الأساسية (مثل exhaustive-deps وrules-of-hooks) ومسائل يبلّغ عنها React Compiler. تُعرَض تشخيصات المُصرّف تلقائياً عبر هذه الإضافة، ويمكن استخدامها حتى إن لم يكن المُصرّف مفعّلاً في تطبيقك بعد.
 
 <Note>
-When the compiler reports a diagnostic, it means that the compiler was able to statically detect a pattern that is not supported or breaks the Rules of React. When it detects this, it **automatically** skips over those components and hooks, while keeping the rest of your app compiled. This ensures optimal coverage of safe optimizations that won't break your app.
+عندما يبلّغ المُصرّف عن تشخيص، يعني أنه استطاع اكتشاف نمط غير مدعوم أو يخالف قواعد React. عندها **يتخطّى** تلقائياً تلك المكوّنات والـ hooks مع الإبقاء على بقية التطبيق مُجمَّعاً، لأقصى تغطية آمنة من التحسينات دون كسر التطبيق.
 
-What this means for linting, is that you don’t need to fix all violations immediately. Address them at your own pace to gradually increase the number of optimized components.
+بالنسبة للـ lint، لا يلزمك إصلاح كل المخالفات فوراً. عالجها بوتيرتك لزيادة عدد المكوّنات المُحسَّنة تدريجياً.
 </Note>
 
-## Recommended Rules {/*recommended*/}
-
-These rules are included in the `recommended` preset in `eslint-plugin-react-hooks`:
-
-* [`exhaustive-deps`](/reference/eslint-plugin-react-hooks/lints/exhaustive-deps) - Validates that dependency arrays for React hooks contain all necessary dependencies
-* [`rules-of-hooks`](/reference/eslint-plugin-react-hooks/lints/rules-of-hooks) - Validates that components and hooks follow the Rules of Hooks
-* [`component-hook-factories`](/reference/eslint-plugin-react-hooks/lints/component-hook-factories) - Validates higher order functions defining nested components or hooks
-* [`config`](/reference/eslint-plugin-react-hooks/lints/config) - Validates the compiler configuration options
-* [`error-boundaries`](/reference/eslint-plugin-react-hooks/lints/error-boundaries) - Validates usage of Error Boundaries instead of try/catch for child errors
-* [`gating`](/reference/eslint-plugin-react-hooks/lints/gating) - Validates configuration of gating mode
-* [`globals`](/reference/eslint-plugin-react-hooks/lints/globals) - Validates against assignment/mutation of globals during render
-* [`immutability`](/reference/eslint-plugin-react-hooks/lints/immutability) - Validates against mutating props, state, and other immutable values
-* [`incompatible-library`](/reference/eslint-plugin-react-hooks/lints/incompatible-library) - Validates against usage of libraries which are incompatible with memoization
-* [`preserve-manual-memoization`](/reference/eslint-plugin-react-hooks/lints/preserve-manual-memoization) - Validates that existing manual memoization is preserved by the compiler
-* [`purity`](/reference/eslint-plugin-react-hooks/lints/purity) - Validates that components/hooks are pure by checking known-impure functions
-* [`refs`](/reference/eslint-plugin-react-hooks/lints/refs) - Validates correct usage of refs, not reading/writing during render
-* [`set-state-in-effect`](/reference/eslint-plugin-react-hooks/lints/set-state-in-effect) - Validates against calling setState synchronously in an effect
-* [`set-state-in-render`](/reference/eslint-plugin-react-hooks/lints/set-state-in-render) - Validates against setting state during render
-* [`static-components`](/reference/eslint-plugin-react-hooks/lints/static-components) - Validates that components are static, not recreated every render
-* [`unsupported-syntax`](/reference/eslint-plugin-react-hooks/lints/unsupported-syntax) - Validates against syntax that React Compiler does not support
-* [`use-memo`](/reference/eslint-plugin-react-hooks/lints/use-memo) - Validates usage of the `useMemo` hook without a return value
+## القواعد الموصى بها {/*recommended*/}
+
+هذه القواعد ضمن الإعداد `recommended` في `eslint-plugin-react-hooks`:
+
+* [`exhaustive-deps`](/reference/eslint-plugin-react-hooks/lints/exhaustive-deps) — يتحقق أن مصفوفات تبعيات الـ hooks تتضمّن كل التبعيات اللازمة
+* [`rules-of-hooks`](/reference/eslint-plugin-react-hooks/lints/rules-of-hooks) — يتحقق أن المكوّنات والـ hooks تتبع Rules of Hooks
+* [`component-hook-factories`](/reference/eslint-plugin-react-hooks/lints/component-hook-factories) — دوال رتبة أعلى تُعرّف مكوّنات أو hooks متداخلة
+* [`config`](/reference/eslint-plugin-react-hooks/lints/config) — صحة خيارات إعداد المُصرّف
+* [`error-boundaries`](/reference/eslint-plugin-react-hooks/lints/error-boundaries) — استخدام Error Boundaries بدلاً من try/ccatch لأخطاء الأبناء
+* [`gating`](/reference/eslint-plugin-react-hooks/lints/gating) — ضبط وضع gating
+* [`globals`](/reference/eslint-plugin-react-hooks/lints/globals) — تجنّب إسناد/تعديل عامات أثناء التصيير
+* [`immutability`](/reference/eslint-plugin-react-hooks/lints/immutability) — عدم تعديل props أو state أو قيم غير قابلة للتغيير
+* [`incompatible-library`](/reference/eslint-plugin-react-hooks/lints/incompatible-library) — مكتبات غير متوافقة مع التذكّر
+* [`preserve-manual-memoization`](/reference/eslint-plugin-react-hooks/lints/preserve-manual-memoization) — الإبقاء على التذكّر اليدوي عند المُصرّف
+* [`purity`](/reference/eslint-plugin-react-hooks/lints/purity) — نقاء المكوّنات/الـ hooks عبر دوال معروفة بعدم النقاء
+* [`refs`](/reference/eslint-plugin-react-hooks/lints/refs) — استخدام صحيح للـ refs دون قراءة/كتابة أثناء التصيير
+* [`set-state-in-effect`](/reference/eslint-plugin-react-hooks/lints/set-state-in-effect) — عدم استدعاء setState متزامناً داخل effect
+* [`set-state-in-render`](/reference/eslint-plugin-react-hooks/lints/set-state-in-render) — عدم ضبط الحالة أثناء التصيير
+* [`static-components`](/reference/eslint-plugin-react-hooks/lints/static-components) — مكوّنات ثابتة لا تُعاد إنشاؤها كل تصيير
+* [`unsupported-syntax`](/reference/eslint-plugin-react-hooks/lints/unsupported-syntax) — صياغة لا يدعمها React Compiler
+* [`use-memo`](/reference/eslint-plugin-react-hooks/lints/use-memo) — استخدام `useMemo` دون قيمة مُرجَعة

src/content/reference/eslint-plugin-react-hooks/lints/component-hook-factories.md

@@ -4,27 +4,27 @@ title: component-hook-factories
 
 <Intro>
 
-Validates against higher order functions defining nested components or hooks. Components and hooks should be defined at the module level.
+يتحقق من عدم استخدام دوال رتبة أعلى تعرّف مكوّنات أو hooks متداخلة. يجب تعريف المكوّنات والـ hooks على مستوى الوحدة.
 
 </Intro>
 
-## Rule Details {/*rule-details*/}
+## تفاصيل القاعدة {/*rule-details*/}
 
-Defining components or hooks inside other functions creates new instances on every call. React treats each as a completely different component, destroying and recreating the entire component tree, losing all state, and causing performance problems.
+تعريف مكوّنات أو hooks داخل دوال أخرى ينشئ نسخاً جديدة كل استدعاء. يعامل React كل نسخة كمكوّن مختلف تماماً، فيدمّر ويعيد إنشاء شجرة المكوّن بالكامل، يفقد كل الحالة، ويسبب مشاكل أداء.
 
-### Invalid {/*invalid*/}
+### غير صالح {/*invalid*/}
 
-Examples of incorrect code for this rule:
+أمثلة لشيفرة غير صحيحة لهذه القاعدة:
 
 ```js {expectedErrors: {'react-compiler': [14]}}
-// ❌ Factory function creating components
+// ❌ دالة مصنع تُنشئ مكوّنات
 function createComponent(defaultValue) {
   return function Component() {
     // ...
   };
 }
 
-// ❌ Component defined inside component
+// ❌ مكوّن معرّف داخل مكوّن
 function Parent() {
   function Child() {
     // ...
@@ -33,38 +33,38 @@ function Parent() {
   return <Child />;
 }
 
-// ❌ Hook factory function
+// ❌ دالة مصنع لـ hook
 function createCustomHook(endpoint) {
   return function useData() {
     // ...
   };
 }
 ```
 
-### Valid {/*valid*/}
+### صالح {/*valid*/}
 
-Examples of correct code for this rule:
+أمثلة لشيفرة صحيحة لهذه القاعدة:
 
 ```js
-// ✅ Component defined at module level
+// ✅ مكوّن معرّف على مستوى الوحدة
 function Component({ defaultValue }) {
   // ...
 }
 
-// ✅ Custom hook at module level
+// ✅ hook مخصّص على مستوى الوحدة
 function useData(endpoint) {
   // ...
 }
 ```
 
-## Troubleshooting {/*troubleshooting*/}
+## استكشاف الأعطال {/*troubleshooting*/}
 
-### I need dynamic component behavior {/*dynamic-behavior*/}
+### أحتاج سلوكاً ديناميكياً للمكوّن {/*dynamic-behavior*/}
 
-You might think you need a factory to create customized components:
+قد تظن أنك تحتاج مصنعاً لإنشاء مكوّنات مخصّصة:
 
 ```js
-// ❌ Wrong: Factory pattern
+// ❌ خطأ: نمط مصنع
 function makeButton(color) {
   return function Button({children}) {
     return (
@@ -79,10 +79,10 @@ const RedButton = makeButton('red');
 const BlueButton = makeButton('blue');
 ```
 
-Pass [JSX as children](/learn/passing-props-to-a-component#passing-jsx-as-children) instead:
+مرّر [JSX كأبناء](/learn/passing-props-to-a-component#passing-jsx-as-children) بدلاً من ذلك:
 
 ```js
-// ✅ Better: Pass JSX as children
+// ✅ أفضل: مرّر JSX كأبناء
 function Button({color, children}) {
   return (
     <button style={{backgroundColor: color}}>

src/content/reference/eslint-plugin-react-hooks/lints/config.md

@@ -4,44 +4,44 @@ title: config
 
 <Intro>
 
-Validates the compiler [configuration options](/reference/react-compiler/configuration).
+يتحقق من [خيارات إعداد](/reference/react-compiler/configuration) المُصرّف.
 
 </Intro>
 
-## Rule Details {/*rule-details*/}
+## تفاصيل القاعدة {/*rule-details*/}
 
-React Compiler accepts various [configuration options](/reference/react-compiler/configuration)  to control its behavior. This rule validates that your configuration uses correct option names and value types, preventing silent failures from typos or incorrect settings.
+يقبل React Compiler عدة [خيارات إعداد](/reference/react-compiler/configuration) للتحكّم في سلوكه. تتحقق هذه القاعدة من أن إعدادك يستخدم أسماء خيارات صحيحة وأنواع قيم صحيحة، لتجنّب فشل صامت بسبب أخطاء مطبعية أو إعدادات خاطئة.
 
-### Invalid {/*invalid*/}
+### غير صالح {/*invalid*/}
 
-Examples of incorrect code for this rule:
+أمثلة لشيفرة غير صحيحة لهذه القاعدة:
 
 ```js
-// ❌ Unknown option name
+// ❌ اسم خيار غير معروف
 module.exports = {
   plugins: [
     ['babel-plugin-react-compiler', {
-      compileMode: 'all' // Typo: should be compilationMode
+      compileMode: 'all' // خطأ مطبعي: يجب أن يكون compilationMode
     }]
   ]
 };
 
-// ❌ Invalid option value
+// ❌ قيمة خيار غير صالحة
 module.exports = {
   plugins: [
     ['babel-plugin-react-compiler', {
-      compilationMode: 'everything' // Invalid: use 'all' or 'infer'
+      compilationMode: 'everything' // غير صالح: استخدم 'all' أو 'infer'
     }]
   ]
 };
 ```
 
-### Valid {/*valid*/}
+### صالح {/*valid*/}
 
-Examples of correct code for this rule:
+أمثلة لشيفرة صحيحة لهذه القاعدة:
 
 ```js
-// ✅ Valid compiler configuration
+// ✅ إعداد مُصرّف صالح
 module.exports = {
   plugins: [
     ['babel-plugin-react-compiler', {
@@ -52,38 +52,38 @@ module.exports = {
 };
 ```
 
-## Troubleshooting {/*troubleshooting*/}
+## استكشاف الأعطال {/*troubleshooting*/}
 
-### Configuration not working as expected {/*config-not-working*/}
+### الإعداد لا يعمل كما تتوقع {/*config-not-working*/}
 
-Your compiler configuration might have typos or incorrect values:
+قد يحتوي إعداد المُصرّف على أخطاء مطبعية أو قيم خاطئة:
 
 ```js
-// ❌ Wrong: Common configuration mistakes
+// ❌ خطأ: أخطاء إعداد شائعة
 module.exports = {
   plugins: [
     ['babel-plugin-react-compiler', {
-      // Typo in option name
+      // خطأ مطبعي في اسم الخيار
       compilationMod: 'all',
-      // Wrong value type
+      // نوع قيمة خاطئ
       panicThreshold: true,
-      // Unknown option
+      // خيار غير معروف
       optimizationLevel: 'max'
     }]
   ]
 };
 ```
 
-Check the [configuration documentation](/reference/react-compiler/configuration) for valid options:
+راجع [توثيق الإعداد](/reference/react-compiler/configuration) للخيارات الصالحة:
 
 ```js
-// ✅ Better: Valid configuration
+// ✅ أفضل: إعداد صالح
 module.exports = {
   plugins: [
     ['babel-plugin-react-compiler', {
-      compilationMode: 'all', // or 'infer'
-      panicThreshold: 'none', // or 'critical_errors', 'all_errors'
-      // Only use documented options
+      compilationMode: 'all', // أو 'infer'
+      panicThreshold: 'none', // أو 'critical_errors' أو 'all_errors'
+      // استخدم فقط الخيارات الموثّقة
     }]
   ]
 };

src/content/reference/eslint-plugin-react-hooks/lints/error-boundaries.md

@@ -4,35 +4,35 @@ title: error-boundaries
 
 <Intro>
 
-Validates usage of Error Boundaries instead of try/catch for errors in child components.
+يتحقق من استخدام Error Boundaries بدلاً من try/catch لأخطاء المكوّنات الفرعية.
 
 </Intro>
 
-## Rule Details {/*rule-details*/}
+## تفاصيل القاعدة {/*rule-details*/}
 
-Try/catch blocks can't catch errors that happen during React's rendering process. Errors thrown in rendering methods or hooks bubble up through the component tree. Only [Error Boundaries](/reference/react/Component#catching-rendering-errors-with-an-error-boundary) can catch these errors.
+لا تستطيع كتل try/catch التقاط أخطاء تحدث أثناء عملية التصيير في React. الأخطاء المرمية في دوال التصيير أو الـ hooks تنتقل عبر شجرة المكوّنات. فقط [Error Boundaries](/reference/react/Component#catching-rendering-errors-with-an-error-boundary) يمكنها التقاط هذه الأخطاء.
 
-### Invalid {/*invalid*/}
+### غير صالح {/*invalid*/}
 
-Examples of incorrect code for this rule:
+أمثلة لشيفرة غير صحيحة لهذه القاعدة:
 
 ```js {expectedErrors: {'react-compiler': [4]}}
-// ❌ Try/catch won't catch render errors
+// ❌ try/catch لن يلتقط أخطاء التصيير
 function Parent() {
   try {
-    return <ChildComponent />; // If this throws, catch won't help
+    return <ChildComponent />; // إذا رُمي خطأ هنا، catch لن يفيد
   } catch (error) {
     return <div>Error occurred</div>;
   }
 }
 ```
 
-### Valid {/*valid*/}
+### صالح {/*valid*/}
 
-Examples of correct code for this rule:
+أمثلة لشيفرة صحيحة لهذه القاعدة:
 
 ```js
-// ✅ Using error boundary
+// ✅ استخدام Error Boundary
 function Parent() {
   return (
     <ErrorBoundary>
@@ -42,24 +42,24 @@ function Parent() {
 }
 ```
 
-## Troubleshooting {/*troubleshooting*/}
+## استكشاف الأعطال {/*troubleshooting*/}
 
-### Why is the linter telling me not to wrap `use` in `try`/`catch`? {/*why-is-the-linter-telling-me-not-to-wrap-use-in-trycatch*/}
+### لماذا يطلب مني الـ linter عدم لفّ `use` داخل `try`/`catch`؟ {/*why-is-the-linter-telling-me-not-to-wrap-use-in-trycatch*/}
 
-The `use` hook doesn't throw errors in the traditional sense, it suspends component execution. When `use` encounters a pending promise, it suspends the component and lets React show a fallback. Only Suspense and Error Boundaries can handle these cases. The linter warns against `try`/`catch` around `use` to prevent confusion as the `catch` block would never run.
+لا يرمي الـ hook `use` أخطاء بالمعنى التقليدي؛ بل يعلّق تنفيذ المكوّن. عندما يصادف `use` وعداً معلّقاً، يعلّق المكوّن ويترك لـ React عرض حالة بديلة. فقط Suspense وError Boundaries يمكنها التعامل مع هذه الحالات. يحذّر الـ linter من `try`/`catch` حول `use` لتجنّب الالتباس لأن كتلة `catch` لن تعمل أبداً.
 
 ```js {expectedErrors: {'react-compiler': [5]}}
-// ❌ Try/catch around `use` hook
+// ❌ try/catch حول hook `use`
 function Component({promise}) {
   try {
-    const data = use(promise); // Won't catch - `use` suspends, not throws
+    const data = use(promise); // لن يلتقط — `use` يعلّق لا يرمي
     return <div>{data}</div>;
   } catch (error) {
-    return <div>Failed to load</div>; // Unreachable
+    return <div>Failed to load</div>; // لا يُنفَّذ
   }
 }
 
-// ✅ Error boundary catches `use` errors
+// ✅ Error boundary تلتقط أخطاء `use`
 function App() {
   return (
     <ErrorBoundary fallback={<div>Failed to load</div>}>
@@ -69,4 +69,4 @@ function App() {
     </ErrorBoundary>
   );
 }
-```
+```