translate reference react index page

src/content/reference/react/index.md

@@ -1,23 +1,25 @@
 ---
-title: "Built-in React Hooks"
+title: "خطافات تفاعل مدمجة ب React"
 ---
 
 <Intro>
 
-*Hooks* let you use different React features from your components. You can either use the built-in Hooks or combine them to build your own. This page lists all built-in Hooks in React.
+ تمكنك *الخطافات* من استخدام مزايا مختلفة  ل React في مكوناتك. يمكنك إما إستخدام الخطافات المدمجة ( المبنية مسبقا )، او استخدامها لبناء الخطاف الخاص بك . ستريك هذه الصفحة جميع الخطافات المبنية مسبقا
+
 
 </Intro>
 
 ---
 
-## State Hooks {/*state-hooks*/}
+## خطافات الحالة {/*state-hooks*/}
+
+تسمح *الحالة* للمكون ["بتذكر" معلومات مثل مدخلات المستخدم](/learn/state-a-components-memory). على سبيل المثال ، يمكن لمكون النموذج  Form استخدام الحالة لتخزين قيمة الإدخال ، بينما يمكن لمكون معرض الصور استخدام الحالة لتخزين فهرس الصور المحدد.
 
-*State* lets a component ["remember" information like user input.](/learn/state-a-components-memory) For example, a form component can use state to store the input value, while an image gallery component can use state to store the selected image index.
+لإضافة حالة إلى مكون ، استخدم أحد هذه الخطافات:
 
-To add state to a component, use one of these Hooks:
+* [`useState`](/reference/react/useState) يعيّن متغير حالة يمكنك تحديثه مباشرة
 
-* [`useState`](/reference/react/useState) declares a state variable that you can update directly.
-* [`useReducer`](/reference/react/useReducer) declares a state variable with the update logic inside a [reducer function.](/learn/extracting-state-logic-into-a-reducer)
+* [`useReducer`](/reference/react/useReducer) يعيّن عن متغير حالة مع منطق التحديث داخل  [reducer function.](/learn/extracting-state-logic-into-a-reducer)
 
 ```js
 function ImageGallery() {
@@ -27,11 +29,12 @@ function ImageGallery() {
 
 ---
 
-## Context Hooks {/*context-hooks*/}
+## خطاطيف السياق {/*context-hooks*/}
 
-*Context* lets a component [receive information from distant parents without passing it as props.](/learn/passing-props-to-a-component) For example, your app's top-level component can pass the current UI theme to all components below, no matter how deep.
+يسمح *السياق* للمكون [بتلقي المعلومات من الآباء البعيدين دون تمريرها كدعامات](/learn/passing-props-to-a-component). على سبيل المثال ، يمكن لمكوِّن المستوى الأعلى لتطبيقك أن يمرر سمة واجهة المستخدم الحالية إلى جميع المكونات أدناه ، بغض النظر عن مدى عمقها.
 
-* [`useContext`](/reference/react/useContext) reads and subscribes to a context.
+
+* [`useContext`](/reference/react/useContext) يقرأ و يحدّث في السياق.
 
 ```js
 function Button() {
@@ -41,12 +44,14 @@ function Button() {
 
 ---
 
-## Ref Hooks {/*ref-hooks*/}
+## الخطافات المرجع {/*ref-hooks*/}
+
+تسمح *المراجع* للمكون [بحمل بعض المعلومات التي لا تُستخدم للعرض](/learn/referencing-values-with-refs) ، مثل عقدة DOM أو معرّف المهلة.
+ على عكس الحالة ، لا يؤدي تحديث المرجع إلى إعادة تصيير المكون الخاص بك. المرجع Ref هي "فتحة هروب" من نموذج React. تكون مفيدة عندما تحتاج إلى العمل مع أنظمة غير React ، مثل واجهات برمجة تطبيقات المتصفح المضمنة.
 
-*Refs* let a component [hold some information that isn't used for rendering,](/learn/referencing-values-with-refs) like a DOM node or a timeout ID. Unlike with state, updating a ref does not re-render your component. Refs are an "escape hatch" from the React paradigm. They are useful when you need to work with non-React systems, such as the built-in browser APIs.
 
-* [`useRef`](/reference/react/useRef) declares a ref. You can hold any value in it, but most often it's used to hold a DOM node.
-* [`useImperativeHandle`](/reference/react/useImperativeHandle) lets you customize the ref exposed by your component. This is rarely used.
+* [`useRef`](/reference/react/useRef) يعيّن المرجع. يمكنك الاحتفاظ بأي قيمة فيه ، ولكن غالبًا ما يتم استخدامه لاحتواء عقدة DOM
+* [`useImperativeHandle`](/reference/react/useImperativeHandle) يتيح لك تخصيص المرجع الذي يعرضه المكون الخاص بك. نادرًا ما يستخدم .
 
 ```js
 function Form() {
@@ -56,11 +61,12 @@ function Form() {
 
 ---
 
-## Effect Hooks {/*effect-hooks*/}
+## خطافات التأثير {/*effect-hooks*/}
 
-*Effects* let a component [connect to and synchronize with external systems.](/learn/synchronizing-with-effects) This includes dealing with network, browser DOM, animations, widgets written using a different UI library, and other non-React code.
+تسمح التأثيرات للمكون [بالاتصال والمزامنة مع الأنظمة الخارجية](/learn/synchronizing-with-effects). يتضمن ذلك التعامل مع الشبكة ، ومتصفح DOM ، والرسوم المتحركة ، وعناصر واجهة المستخدم المكتوبة باستخدام مكتبة واجهة مستخدم مختلفة ، وأكواد أخرى غير React.
 
-* [`useEffect`](/reference/react/useEffect) connects a component to an external system.
+
+* [`useEffect`](/reference/react/useEffect) يربط مكونًا بنظام خارجي.
 
 ```js
 function ChatRoom({ roomId }) {
@@ -72,23 +78,25 @@ function ChatRoom({ roomId }) {
   // ...
 ```
 
-Effects are an "escape hatch" from the React paradigm. Don't use Effects to orchestrate the data flow of your application. If you're not interacting with an external system, [you might not need an Effect.](/learn/you-might-not-need-an-effect)
+التأثيرات Effect هي "فتحة هروب" من نموذج React. لا تستخدم التأثيرات Effect لتنظيم تدفق البيانات لتطبيقك. إذا كنت لا تتفاعل مع نظام خارجي ، [فقد لا تحتاج إلى تأثير](/learn/you-might-not-need-an-effect).
+
 
-There are two rarely used variations of `useEffect` with differences in timing:
+هناك نوعان نادران من أشكال الاستخدام لل التأثير  `useEffect` مع اختلافات في توقيت الاستخدام:
 
-* [`useLayoutEffect`](/reference/react/useLayoutEffect) fires before the browser repaints the screen. You can measure layout here.
-* [`useInsertionEffect`](/reference/react/useInsertionEffect) fires before React makes changes to the DOM. Libraries can insert dynamic CSS here.
+* [`useLayoutEffect`](/reference/react/useLayoutEffect) ينطلق قبل أن يعيد المتصفح اظهار الشاشة. يمكنك قياس التخطيط هنا.
+* [`useInsertionEffect`](/reference/react/useInsertionEffect) ينطلق قبل أن تُجري React تغييرات على DOM. يمكن للمكتبات إدراج CSS الديناميكي هنا.
 
 ---
 
-## Performance Hooks {/*performance-hooks*/}
+## خطاطيف الأداء {/*performance-hooks*/}
+
+من الطرق الشائعة لتحسين أداء إعادة العرض تخطي العمل غير الضروري. على سبيل المثال ، يمكنك إخبار React بإعادة استخدام عملية حسابية مخبأة أو تخطي إعادة التصيير إذا لم تتغير البيانات منذ التصيير السابق.
 
-A common way to optimize re-rendering performance is to skip unnecessary work. For example, you can tell React to reuse a cached calculation or to skip a re-render if the data has not changed since the previous render.
+لتخطي العمليات الحسابية وإعادة التصيير غير الضرورية ، استخدم أحد هذه الخطافات:
 
-To skip calculations and unnecessary re-rendering, use one of these Hooks:
 
-- [`useMemo`](/reference/react/useMemo) lets you cache the result of an expensive calculation.
-- [`useCallback`](/reference/react/useCallback) lets you cache a function definition before passing it down to an optimized component.
+- [`useMemo`](/reference/react/useMemo) يتيح لك تخزين نتيجة عملية حسابية مكلفة .
+- [`useCallback`](/reference/react/useCallback) يتيح لك تخزين تعريف وظيفة function  قبل تمريره إلى مكون محسن.
 
 ```js
 function TodoList({ todos, tab, theme }) {
@@ -97,25 +105,25 @@ function TodoList({ todos, tab, theme }) {
 }
 ```
 
-Sometimes, you can't skip re-rendering because the screen actually needs to update. In that case, you can improve performance by separating blocking updates that must be synchronous (like typing into an input) from non-blocking updates which don't need to block the user interface (like updating a chart).
+في بعض الأحيان ، لا يمكنك تخطي إعادة العرض لأن الشاشة تحتاج بالفعل إلى التحديث. في هذه الحالة ، يمكنك تحسين الأداء عن طريق فصل التحديثات المحظورة التي يجب أن تكون متزامنة (مثل الكتابة في أحد المدخلات) عن التحديثات غير المحظورة التي لا تحتاج إلى حظر واجهة المستخدم (مثل تحديث مخطط).
 
-To prioritize rendering, use one of these Hooks:
+لتحديد أولوية العرض ، استخدم أحد هذه الخطافات:
 
-- [`useTransition`](/reference/react/useTransition) lets you mark a state transition as non-blocking and allow other updates to interrupt it.
-- [`useDeferredValue`](/reference/react/useDeferredValue) lets you defer updating a non-critical part of the UI and let other parts update first.
+- [`useTransition`](/reference/react/useTransition) يتيح لك انتقال الحالة إلى غير المحظور والسماح للتحديثات الأخرى بالتداخل معها.
+- [`useDeferredValue`](/reference/react/useDeferredValue) يتيح لك تأجيل تحديث جزء غير مهم من واجهة المستخدم والسماح للأجزاء الأخرى بالتحديث أولاً.
 
 ---
 
-## Other Hooks {/*other-hooks*/}
+## خطافات أخرى {/*other-hooks*/}
 
-These Hooks are mostly useful to library authors and aren't commonly used in the application code.
+هذه الخطافات مفيدة في الغالب لمؤلفي المكتبة ولا يتم استخدامها بشكل شائع في كود التطبيق.
 
-- [`useDebugValue`](/reference/react/useDebugValue) lets you customize the label React DevTools displays for your custom Hook.
-- [`useId`](/reference/react/useId) lets a component associate a unique ID with itself. Typically used with accessibility APIs.
-- [`useSyncExternalStore`](/reference/react/useSyncExternalStore) lets a component subscribe to an external store.
+- [`useDebugValue`](/reference/react/useDebugValue) يتيح لك تخصيص التسمية التي يعرضها React DevTools للخطاف المخصص الخاص بك.
+- [`useId`](/reference/react/useId) يتيح للمكون ربط معرف فريد بنفسه. تستخدم عادة مع واجهات برمجة إمكانية الوصول API.
+- [`useSyncExternalStore`](/reference/react/useSyncExternalStore) يتيح للمكون الاشتراك في متجر خارجي.
 
 ---
 
-## Your own Hooks {/*your-own-hooks*/}
+## الخطافات الخاصة بك {/*your-own-hooks*/}
 
-You can also [define your own custom Hooks](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component) as JavaScript functions.
+ يمكنك أيضًا [تحديد الخطافات المخصصة](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component) الخاصة بك كوظائف JavaScript