Merge pull request #517 from abdllahdev/fix/grammar-errors

Fix the plural of `hook` across all translated pages

src/content/learn/index.md

@@ -408,12 +408,12 @@ button {
 لاحظ كيف أن كل زر قادر على "تذكر" حالة الـ `count` الخاصة به دون أي تعارض مع حالة الزر الآخر.
 
 
-## استخدام الخطافات {/*using-hooks*/}
+## استخدام الخطاطيف {/*using-hooks*/}
 
 
-الدوال التي تبدأ بـ `use` تسمى *الخطافات* أو *Hooks*. تعتبر `useState` أحد الخطافات المجهّزة والتي توفرها React. وبإمكانك العثور على قائمة الخطافات المختلفة التي توفرها React في [API مرجع.](/reference/react) ، يمكنك كذلك كتابة الخطافات الخاصة بك عن طريق الجمع بين الخطافات الجاهزة والموفّرة من React.
+الدوال التي تبدأ بـ `use` تسمى *الخطاطيف* أو *Hooks*. تعتبر `useState` أحد الخطاطيف المجهّزة والتي توفرها React. وبإمكانك العثور على قائمة الخطاطيف المختلفة التي توفرها React في [API مرجع.](/reference/react) ، يمكنك كذلك كتابة الخطاطيف الخاصة بك عن طريق الجمع بين الخطاطيف الجاهزة والموفّرة من React.
 
-الخطافات أكثر صرامة من الدوال الأخرى. يمكنك استدعاء الخطاف في مقدمة المكوّن (أو في مقدمة أي خطاف آخر). إذا أردت استخدام `useState` في عبارة شرطية أو في حملة تكرار فقم ببناء مكوّن مستقل ومن ثم استخدامها هناك.
+الخطاطيف أكثر صرامة من الدوال الأخرى. يمكنك استدعاء الخطاف في مقدمة المكوّن (أو في مقدمة أي خطاف آخر). إذا أردت استخدام `useState` في عبارة شرطية أو في حملة تكرار فقم ببناء مكوّن مستقل ومن ثم استخدامها هناك.
 
 
 

src/content/learn/thinking-in-react.md

@@ -272,7 +272,7 @@ td {
 
 إذا، فقيم الحالات ستكون محفوظة لدى المكون `FilterableProductTable`. 
 
-أضف الحالات للمكون باستخدام [خطاف `useState()`.](/reference/react/useState) الخطافات (Hooks) عبارة عن دوال خاصة تسمح لك أن "تربط" مكوناتك بنظام React. أضف متغيرا لكل حالة في بداية الكود الخاص بالمكون `FilterableProductTable` وحدد حالتهم الأولية:
+أضف الحالات للمكون باستخدام [خطاف `useState()`.](/reference/react/useState) الخطاطيف (Hooks) عبارة عن دوال خاصة تسمح لك أن "تربط" مكوناتك بنظام React. أضف متغيرا لكل حالة في بداية الكود الخاص بالمكون `FilterableProductTable` وحدد حالتهم الأولية:
 
 ```js
 function FilterableProductTable({ products }) {

src/content/reference/react/apis.md

@@ -4,7 +4,7 @@ title: "الواجهات البرمجية APIs المدمجة في React"
 
 <Intro>
 
-إضافةً إلى [الخطافات](/reference/react) و[المكونات](/reference/react/components)، تصدر حزمة `react` بعض الواجهات البرمجية الأخرى المفيدة لتعريف المكونات. تعرض هذه الصفحة جميع واجهات React الحديثة المتبقية.
+إضافةً إلى [الخطاطيف](/reference/react) و[المكونات](/reference/react/components)، تصدر حزمة `react` بعض الواجهات البرمجية الأخرى المفيدة لتعريف المكونات. تعرض هذه الصفحة جميع واجهات React الحديثة المتبقية.
 
 </Intro>
 

src/content/reference/react/index.md

@@ -1,21 +1,21 @@
 ---
-title: "خطافات مدمجة في React"
+title: "خطاطيف مدمجة في React"
 ---
 
 <Intro>
 
- تمكنك *الخطافات* (Hooks) من استخدام مزايا مختلفة من React في مكوناتك. يمكنك إما استخدام الخطافات المدمجة (المبنية مسبقا)، أو استخدامها لبناء الخطاف الخاص بك. ستريك هذه الصفحة جميع الخطافات المبنية مسبقًا في React.
+ تمكنك *الخطاطيف* (Hooks) من استخدام مزايا مختلفة من React في مكوناتك. يمكنك إما استخدام الخطاطيف المدمجة (المبنية مسبقا)، أو استخدامها لبناء الخطاف الخاص بك. ستريك هذه الصفحة جميع الخطاطيف المبنية مسبقًا في React.
 
 
 </Intro>
 
 ---
 
-## خطافات الحالة (State) {/*state-hooks*/}
+## خطاطيف الحالة (State) {/*state-hooks*/}
 
 تسمح *الحالة* للمكون ["بتذكر" معلومات مثل إدخالات المستخدم](/learn/state-a-components-memory). على سبيل المثال، يمكن لمكوّن النموذج Form استخدام الحالة لتخزين قيمة الإدخال، بينما يمكن لمكون معرض الصور استخدام الحالة لتخزين رقم الصورة المختارة.
 
-لإضافة حالة إلى مكون، استخدم أحد هذه الخطافات:
+لإضافة حالة إلى مكون، استخدم أحد هذه الخطاطيف:
 
 * [`useState`](/reference/react/useState) يعيّن .متغير حالة يمكنك تحديثه مباشرة
 
@@ -29,7 +29,7 @@ function ImageGallery() {
 
 ---
 
-## خطافات السياق (Context) {/*context-hooks*/}
+## خطاطيف السياق (Context) {/*context-hooks*/}
 
 يسمح *السياق* للمكون [بتلقي المعلومات من الآباء البعيدين دون تمريرها كدعامات (props)](/learn/passing-props-to-a-component). على سبيل المثال، يمكن لمكوِّن المستوى الأعلى لتطبيقك أن يمرر سمة واجهة المستخدم الحالية إلى جميع المكونات أدناه، بغض النظر عن مدى عمقها.
 
@@ -44,7 +44,7 @@ function Button() {
 
 ---
 
-## خطافات المرجع {/*ref-hooks*/}
+## خطاطيف المرجع {/*ref-hooks*/}
 
 تسمح *المراجع* للمكون [بحمل بعض المعلومات التي لا تُستخدم للعرض](/learn/referencing-values-with-refs) ، مثل عنصر DOM أو معرّف المهلة (timeout ID).
  على عكس الحالة ، لا يؤدي تحديث المرجع إلى إعادة تصيير المكون الخاص بك. المرجع Ref هي "فتحة هروب" من طريقة React. تكون مفيدة عندما تحتاج إلى العمل مع أنظمة غير React، مثل واجهات برمجة تطبيقات المتصفح المضمنة (BOM).
@@ -61,7 +61,7 @@ function Form() {
 
 ---
 
-## خطافات التأثير (Effect) {/*effect-hooks*/}
+## خطاطيف التأثير (Effect) {/*effect-hooks*/}
 
 تسمح التأثيرات للمكون [بالاتصال والمزامنة مع الأنظمة الخارجية](/learn/synchronizing-with-effects). يتضمن ذلك التعامل مع الشبكة، ومتصفح DOM، والرسوم المتحركة، وعناصر واجهة المستخدم المكتوبة باستخدام مكتبة واجهة مستخدم مختلفة، وأكواد أخرى غير React.
 
@@ -92,7 +92,7 @@ function ChatRoom({ roomId }) {
 
 من الطرق الشائعة لتحسين أداء إعادة العرض تخطي العمل غير الضروري. على سبيل المثال، يمكنك إخبار React بإعادة استخدام نتيجة عملية حسابية مخزنة أو تخطي إعادة التصيير إذا لم تتغير البيانات منذ التصيير السابق.
 
-لتخطي العمليات الحسابية وإعادة التصيير غير الضرورية ، استخدم أحد هذه الخطافات:
+لتخطي العمليات الحسابية وإعادة التصيير غير الضرورية ، استخدم أحد هذه الخطاطيف:
 
 
 - [`useMemo`](/reference/react/useMemo) يتيح لك تخزين نتيجة عملية حسابية مكلفة.
@@ -107,23 +107,23 @@ function TodoList({ todos, tab, theme }) {
 
 في بعض الأحيان، لا يمكنك تخطي إعادة العرض لأن الشاشة تحتاج بالفعل إلى التحديث. في تلك الحالة، يمكنك تحسين الأداء عن طريق فصل التحديثات الحاظرة لمعالجة الكود (blocking) التي يجب أن تكون متزامنة (مثل الكتابة في أحد المدخلات) عن التحديثات غير الحاظرة (non-blocking) التي لا تحتاج إلى حظر واجهة المستخدم (مثل تحديث مخطط).
 
-لتحديد أولوية العرض، استخدم أحد هذه الخطافات:
+لتحديد أولوية العرض، استخدم أحد هذه الخطاطيف:
 
 - [`useTransition`](/reference/react/useTransition) يتيح لك اعتبار الحالة غير حاظرة والسماح للتحديثات الأخرى بالتداخل معها.
 - [`useDeferredValue`](/reference/react/useDeferredValue) يتيح لك تأجيل تحديث جزء غير مهم من واجهة المستخدم والسماح للأجزاء الأخرى بالتحديث أولاً.
 
 ---
 
-## خطافات أخرى {/*other-hooks*/}
+## خطاطيف أخرى {/*other-hooks*/}
 
-هذه الخطافات مفيدة في الغالب لمؤلفي المكتبات ولا يتم استخدامها بشكل شائع في كود التطبيق.
+هذه الخطاطيف مفيدة في الغالب لمؤلفي المكتبات ولا يتم استخدامها بشكل شائع في كود التطبيق.
 
 - [`useDebugValue`](/reference/react/useDebugValue) يتيح لك تخصيص التسمية التي تعرضها أدوات مطوري React لخطافك المخصص.
 - [`useId`](/reference/react/useId) يتيح للمكون ربط معرف فريد بنفسه (unique ID). تستخدم عادة مع واجهات برمجة إمكانية الوصول API.
 - [`useSyncExternalStore`](/reference/react/useSyncExternalStore) يتيح للمكون الاشتراك في مُوَزّع خارجي.
 
 ---
 
-## الخطافات الخاصة بك {/*your-own-hooks*/}
+## الخطاطيف الخاصة بك {/*your-own-hooks*/}
 
- يمكنك أيضًا [تعريف الخطافات المخصصة](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component) الخاصة بك كدوال JavaScript.
+ يمكنك أيضًا [تعريف الخطاطيف المخصصة](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component) الخاصة بك كدوال JavaScript.

src/content/reference/react/useDebugValue.md

@@ -103,7 +103,7 @@ function subscribe(callback) {
 
 <Note>
 
-لا تضف قيم تصحيح إلى كل خطاف مخصص. يعد مفيدًا أكثر للخطافات المخصصة التي تشكل جزءا من المكتبات المشتركة والتي تحتوي على هيكل بيانات داخلي معقد يصعب فحصه.
+لا تضف قيم تصحيح إلى كل خطاف مخصص. يعد مفيدًا أكثر للخطاطيف المخصصة التي تشكل جزءا من المكتبات المشتركة والتي تحتوي على هيكل بيانات داخلي معقد يصعب فحصه.
 
 </Note>
 

src/content/reference/react/useId.md

@@ -42,7 +42,7 @@ function PasswordField() {
 
 #### تنبيهات {/*caveats*/}
 
-* `useId` هو خطاف، لذلك يمكنك استدعائه فقط **في المستوي الأعلي من مكونك** أو من خلال  الخطافات الخاصة بك. لا يمكنك استدعاء الخطاف داخل الحلقات والشروط. إذا كنت بحاجة إلي ذلك، قم بإستخراج مكون جديد وقم بنقل الحالة إليه.
+* `useId` هو خطاف، لذلك يمكنك استدعائه فقط **في المستوي الأعلي من مكونك** أو من خلال الخطاطيف الخاصة بك. لا يمكنك استدعاء الخطاف داخل الحلقات والشروط. إذا كنت بحاجة إلي ذلك، قم بإستخراج مكون جديد وقم بنقل الحالة إليه.
 
 * `useId` **لا ينبغي استخدامه لتوليد المفاتيح** في القائمة. [يجب أن تتم إنشاء المفاتيح من البيانات الخاصة بك.](/learn/rendering-lists#where-to-get-your-key)
 

src/content/warnings/invalid-hook-call-warning.md

@@ -7,30 +7,29 @@ title: Rules of Hooks
 <ConsoleBlock level="error">
 
 Hooks can only be called inside the body of a function component. \
-يُمكن استِدعاء الخطافات فقط داخل مُكوّن دالّة.
-
+يُمكن استِدعاء الخطاطيف فقط داخل مكون دالّة.
 </ConsoleBlock>
 
 هُناك ثلاثة أسباب شائعه لظهور الخطأ أعلاه:
 
 1. لِديك **نُسخ غير مُتوافقة** من React و React DOM.
-2. قد تكون **تخرق [قواعد الخطافات](/docs/hooks-rules.html)**.
+2. قد تكون **تخرق [قواعد الخطاطيف](/docs/hooks-rules.html)**.
 3. من المُحتمل أن يكون لديك **أكثر من نسخة React** في نفس التطبيق.
 
 دَعنا ننظُر إلى كُل من الحالات أعلاه.
 
 ## نُسخ غير مُتوافقة من React و React DOM {/*mismatching-versions-of-react-and-react-dom*/}
 
-قد تكون تستخدم نسخة `react-dom` أقل من v16.8.0 أو نُسخة `react-native` أقل من 0.59 واللَّتَانِ لا يدعمان الخطافات بعد. يُمكنك تنفيذ "run" أمر `npm ls react-dom` أو `npm ls react-native` في مُجلّد التطبيق خاصتك لمعرفة النُسخة التي تستخدمها. إن وجدت أكثر من نُسخة فقد يخلق ذلك مشاكل (المزيد على ذلك أدناه).
+قد تكون تستخدم نسخة `react-dom` أقل من v16.8.0 أو نُسخة `react-native` أقل من 0.59 واللَّتَانِ لا يدعمان الخطاطيف بعد. يُمكنك تنفيذ أمر `npm ls react-dom` أو `npm ls react-native` في مُجلّد التطبيق خاصتك لمعرفة النُسخة التي تستخدمها. إن وجدت أكثر من نُسخة فقد يخلق ذلك مشاكل (المزيد على ذلك أدناه).
 
-## خرق قواعد الخطافات {/*breaking-the-rules-of-hooks*/}
+## خرق قواعد الخطاطيف {/*breaking-the-rules-of-hooks*/}
 
 يُكمنك استدعاء الخظافات **رَيْثَمَا تٌصيير React مكوّن دالّة** فقط:
 
-* ✅ استدعيهم في المُتسوى الأعلى من بدن "body" مُكوّن الداّلة:
-* ✅ استدعيهم في المُستوى الأعلى من بدن [خطاف مُخَصص](/docs/hooks-custom.html).
+* ✅ استدعهم في المُتسوى الأعلى من بدن "body" مُكوّن الداّلة:
+* ✅ استدعهم في المُستوى الأعلى من بدن [خطاف مُخَصص](/docs/hooks-custom.html).
 
-**تَعلّم المزيد عن ذلك في [قواعد الخطافات](/docs/hooks-rules.html)**
+**تَعلّم المزيد عن ذلك في [قواعد الخطاطيف](/docs/hooks-rules.html)**
 
 ```js{2-3,8-9}
 function Counter() {
@@ -46,11 +45,11 @@ function useWindowWidth() {
 }
 ```
 
-لِتَجنُّب الإرباك ، استدعاء الخطافات في الحالات الأُخرى **ليس** مدعومًا:
+لِتَجنُّب الإرباك ، استدعاء الخطاطيف في الحالات الأُخرى **ليس** مدعومًا:
 
-* 🔴 لا تَستدعِ الخطافات في مكوّنات الصنف.
-* 🔴 لا تستدعِ الخطافات في مُعامِلات الأحداث "event handlers".
-* 🔴 لا تستدعِ الخطافات داخل الدوال المُمَرَرة إلى `useMemo` أو `useReducer` أو `useEffect`.
+* 🔴 لا تَستدعِ الخطاطيف في مكوّنات الصنف.
+* 🔴 لا تستدعِ الخطاطيف في مُعامِلات الأحداث "event handlers".
+* 🔴 لا تستدعِ الخطاطيف داخل الدوال المُمَرَرة إلى `useMemo` أو `useReducer` أو `useEffect`.
 
 إن خرقت تلك القواعد فمن المُمكن ان ترى هذا الخطأ.
 
@@ -110,15 +109,15 @@ class Bad extends React.Component {
 
 <Note>
 
->[الخطافات المُخصّصة](/docs/hooks-custom.html) *من المُحتمل* أن تستدعي خطافات أُخرى (فذلك هو الهدف منها أساسًا). يعمل ذلك لأنه من المفروض أن الخطافات المُخصّصة تُستدعى فقط رَيْثَمَا يُصّيَّر يكون مكوّن الدالّة.
+>[الخطاطيف المُخصّصة](/docs/hooks-custom.html) *من المُحتمل* أن تستدعي خطاطيف أُخرى (فذلك هو الهدف منها أساسًا). يعمل ذلك لأنه من المفروض أن الخطاطيف المُخصّصة تُستدعى فقط رَيْثَمَا يُصّيَّر يكون مكوّن الدالّة.
 
 </Note>
 
 ## نُسخَتين مِن React {/*duplicate-react*/}
 
-حتى تعمل الخطافات ، يجب ان يكون امر الاستيراد "import" في شيفرة التطبيق خاصّتِك يُحَلَّل "resolve" إلى نفس الواجهة "module" التي في أمر الاستيراد داخل حُزمة `react-dom`.
+حتى تعمل الخطاطيف ، يجب ان يكون امر الاستيراد "import" في شيفرة التطبيق خاصّتِك يُحَلَّل "resolve" إلى نفس الواجهة "module" التي في أمر الاستيراد داخل حُزمة `react-dom`.
 
-إن حُلِّلا أمرا استيراد `react` إلى كائنين تصدير مُختَلِفَين ، فأنك سترى هذا الخطأ. يحدث ذلك إن **كانت لديك نسختان** من حُزمة `react`. 
+إن حُلِّلا أمرا استيراد `react` إلى كائنين تصدير مُختَلِفَين ، فأنك سترى هذا الخطأ. يحدث ذلك إن **كانت لديك نسختان** من حُزمة `react`.
 
 إن كُنت تستخدم Node لتنظيم الحُزم "package management" ، فيُكمنك تنفيذ الأمر الفحص التالي في مُجلّد المشروح خاصّتك:
 
@@ -144,7 +143,7 @@ console.log(window.React1 === window.React2);
 
 إن طُبِعَ `false` فأنّه من المُمكن أن يكون لديك اثنان من React و عليك معرفة سبب حصول ذلك. [هذه التذكره "issue"](https://github.com/facebook/react/issues/13991) تحتوي على بعض الأسباب الشائعة.
 
-هذه المُشكلة قد تظهر عند تنفيذك لأمر `npm link` أو أمرًا مشابه له. في تلك الحالة ، فأن المُجَمِّع "bundler" قد يَرى اثنان React - واحدة في مُجلّد التطبيق والأُخرى في مُجلّد المكتبة. اعتِبارًا `myapp` و `mylib` مُجلّدان إخوة (على نفس المُستوى) فقد يكون تنفيذ أمر `npm link ../myapp/node_modules/react` من `mylib` حلًا مُحتَملًا. يقوم ذلك بجعل المكتبة تستخدم نسخة React للتطبيق. 
+هذه المُشكلة قد تظهر عند تنفيذك لأمر `npm link` أو أمرًا مشابه له. في تلك الحالة ، فأن المُجَمِّع "bundler" قد يَرى اثنان React - واحدة في مُجلّد التطبيق والأُخرى في مُجلّد المكتبة. اعتِبارًا `myapp` و `mylib` مُجلّدان إخوة (على نفس المُستوى) فقد يكون تنفيذ أمر `npm link ../myapp/node_modules/react` من `mylib` حلًا مُحتَملًا. يقوم ذلك بجعل المكتبة تستخدم نسخة React للتطبيق.
 
 <Note>