Skip to content

Commit f6930fc

Browse files
AhmedBasetAhmedBaset
committed
Fix language mismatch in useId.md and index.md
1 parent 61a17d4 commit f6930fc

File tree

3 files changed

+47
-186
lines changed

3 files changed

+47
-186
lines changed

‎src/content/reference/react/hooks.md‎

Lines changed: 47 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
---
2-
title: "Built-in React Hooks"
2+
title: "خطاطيف مدمجة في React"
33
---
44

55
<Intro>
66

7-
*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.
7+
تمكنك *الخطاطيف* (Hooks) من استخدام مزايا مختلفة من React في مكوناتك. يمكنك إما استخدام الخطاطيف المدمجة (المبنية مسبقا)، أو استخدامها لبناء الخطاف الخاص بك. ستريك هذه الصفحة جميع الخطاطيف المبنية مسبقًا في React.
88

99
</Intro>
1010

1111
---
1212

13-
## State Hooks {/*state-hooks*/}
13+
## خطاطيف الحالة (State) {/*state-hooks*/}
1414

15-
*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.
15+
تسمح *الحالة* للمكون ["بتذكر" معلومات مثل إدخالات المستخدم](/learn/state-a-components-memory). على سبيل المثال، يمكن لمكوّن النموذج Form استخدام الحالة لتخزين قيمة الإدخال، بينما يمكن لمكون معرض الصور استخدام الحالة لتخزين رقم الصورة المختارة.
1616

17-
To add state to a component, use one of these Hooks:
17+
لإضافة حالة إلى مكون، استخدم أحد هذه الخطاطيف:
1818

19-
* [`useState`](/reference/react/useState) declares a state variable that you can update directly.
20-
* [`useReducer`](/reference/react/useReducer) declares a state variable with the update logic inside a [reducer function.](/learn/extracting-state-logic-into-a-reducer)
19+
* [`useState`](/reference/react/useState) يعيّن .متغير حالة يمكنك تحديثه مباشرة
20+
* [`useReducer`](/reference/react/useReducer) يعيّن متغير حالة مع منطق التحديث داخل [دالة reducer.](/learn/extracting-state-logic-into-a-reducer)
2121

2222
```js
2323
function ImageGallery() {
@@ -27,11 +27,12 @@ function ImageGallery() {
2727
2828
---
2929
30-
## Context Hooks {/*context-hooks*/}
30+
## خطاطيف السياق (Context) {/*context-hooks*/}
3131
32-
*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.
32+
يسمح *السياق* للمكون [بتلقي المعلومات من الآباء البعيدين دون تمريرها كدعامات (props)](/learn/passing-props-to-a-component). على سبيل المثال، يمكن لمكوِّن المستوى الأعلى لتطبيقك أن يمرر سمة واجهة المستخدم الحالية إلى جميع المكونات أدناه، بغض النظر عن مدى عمقها.
3333
34-
* [`useContext`](/reference/react/useContext) reads and subscribes to a context.
34+
35+
* [`useContext`](/reference/react/useContext) يقرأ ويحدّث في السياق.
3536
3637
```js
3738
function Button() {
@@ -41,12 +42,14 @@ function Button() {
4142
4243
---
4344
44-
## Ref Hooks {/*ref-hooks*/}
45+
## خطاطيف المرجع {/*ref-hooks*/}
46+
47+
تسمح *المراجع* للمكون [بحمل بعض المعلومات التي لا تُستخدم للعرض](/learn/referencing-values-with-refs) ، مثل عنصر DOM أو معرّف المهلة (timeout ID).
48+
على عكس الحالة ، لا يؤدي تحديث المرجع إلى إعادة تصيير المكون الخاص بك. المرجع Ref هي "فتحة هروب" من طريقة React. تكون مفيدة عندما تحتاج إلى العمل مع أنظمة غير React، مثل واجهات برمجة تطبيقات المتصفح المضمنة (BOM).
4549
46-
*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.
4750
48-
* [`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.
49-
* [`useImperativeHandle`](/reference/react/useImperativeHandle) lets you customize the ref exposed by your component. This is rarely used.
51+
* [`useRef`](/reference/react/useRef) يعيّن المرجع، يمكنك الاحتفاظ بأي قيمة فيه، ولكن غالبًا ما يتم استخدامه لاحتواء عنصر DOM
52+
* [`useImperativeHandle`](/reference/react/useImperativeHandle) يتيح لك تخصيص المرجع الذي يعرضه المكون الخاص بك. نادرًا ما يُستخدم هذا الخطاف.
5053
5154
```js
5255
function Form() {
@@ -56,11 +59,12 @@ function Form() {
5659
5760
---
5861
59-
## Effect Hooks {/*effect-hooks*/}
62+
## خطاطيف التأثير (Effect) {/*effect-hooks*/}
63+
64+
تسمح التأثيرات للمكون [بالاتصال والمزامنة مع الأنظمة الخارجية](/learn/synchronizing-with-effects). يتضمن ذلك التعامل مع الشبكة، ومتصفح DOM، والرسوم المتحركة، وعناصر واجهة المستخدم المكتوبة باستخدام مكتبة واجهة مستخدم مختلفة، وأكواد أخرى غير React.
6065
61-
*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.
6266
63-
* [`useEffect`](/reference/react/useEffect) connects a component to an external system.
67+
* [`useEffect`](/reference/react/useEffect) يربط المكوّن بنظام خارجي.
6468
6569
```js
6670
function ChatRoom({ roomId }) {
@@ -72,23 +76,25 @@ function ChatRoom({ roomId }) {
7276
// ...
7377
```
7478
75-
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)
79+
التأثيرات هي "فتحة هروب" من أسلوب React. لا تَستخدِم التأثيرات لتنظيم تدفق البيانات لتطبيقك. إذا كنت لا تتفاعل مع نظام خارجي، [فقد لا تحتاج إلى تأثير](/learn/you-might-not-need-an-effect).
7680
77-
There are two rarely used variations of `useEffect` with differences in timing:
7881
79-
* [`useLayoutEffect`](/reference/react/useLayoutEffect) fires before the browser repaints the screen. You can measure layout here.
80-
* [`useInsertionEffect`](/reference/react/useInsertionEffect) fires before React makes changes to the DOM. Libraries can insert dynamic CSS here.
82+
هناك نوعان نادران من أشكال الاستخدام للتأثير `useEffect` مع اختلافات في توقيت الاستخدام:
83+
84+
* [`useLayoutEffect`](/reference/react/useLayoutEffect) ينطلق قبل أن يعيد المتصفح اظهار الشاشة. يمكنك قياس التخطيط هنا.
85+
* [`useInsertionEffect`](/reference/react/useInsertionEffect) ينطلق قبل أن تُجري React تغييرات على DOM. يمكن للمكتبات إدراج CSS الديناميكي هنا.
8186
8287
---
8388
84-
## Performance Hooks {/*performance-hooks*/}
89+
## خطاطيف الأداء {/*performance-hooks*/}
90+
91+
من الطرق الشائعة لتحسين أداء إعادة العرض تخطي العمل غير الضروري. على سبيل المثال، يمكنك إخبار React بإعادة استخدام نتيجة عملية حسابية مخزنة أو تخطي إعادة التصيير إذا لم تتغير البيانات منذ التصيير السابق.
8592
86-
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.
93+
لتخطي العمليات الحسابية وإعادة التصيير غير الضرورية ، استخدم أحد هذه الخطاطيف:
8794
88-
To skip calculations and unnecessary re-rendering, use one of these Hooks:
8995
90-
- [`useMemo`](/reference/react/useMemo) lets you cache the result of an expensive calculation.
91-
- [`useCallback`](/reference/react/useCallback) lets you cache a function definition before passing it down to an optimized component.
96+
- [`useMemo`](/reference/react/useMemo) يتيح لك تخزين نتيجة عملية حسابية مكلفة.
97+
- [`useCallback`](/reference/react/useCallback) يتيح لك تخزين تعريف وظيفة function قبل تمريره إلى مكون محسَّن.
9298
9399
```js
94100
function TodoList({ todos, tab, theme }) {
@@ -97,22 +103,22 @@ function TodoList({ todos, tab, theme }) {
97103
}
98104
```
99105
100-
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).
106+
في بعض الأحيان، لا يمكنك تخطي إعادة العرض لأن الشاشة تحتاج بالفعل إلى التحديث. في تلك الحالة، يمكنك تحسين الأداء عن طريق فصل التحديثات الحاظرة لمعالجة الكود (blocking) التي يجب أن تكون متزامنة (مثل الكتابة في أحد المدخلات) عن التحديثات غير الحاظرة (non-blocking) التي لا تحتاج إلى حظر واجهة المستخدم (مثل تحديث مخطط).
101107
102-
To prioritize rendering, use one of these Hooks:
108+
لتحديد أولوية العرض، استخدم أحد هذه الخطاطيف:
103109
104-
- [`useTransition`](/reference/react/useTransition) lets you mark a state transition as non-blocking and allow other updates to interrupt it.
105-
- [`useDeferredValue`](/reference/react/useDeferredValue) lets you defer updating a non-critical part of the UI and let other parts update first.
110+
- [`useTransition`](/reference/react/useTransition) يتيح لك اعتبار الحالة غير حاظرة والسماح للتحديثات الأخرى بالتداخل معها.
111+
- [`useDeferredValue`](/reference/react/useDeferredValue) يتيح لك تأجيل تحديث جزء غير مهم من واجهة المستخدم والسماح للأجزاء الأخرى بالتحديث أولاً.
106112
107113
---
108114
109-
## Resource Hooks {/*resource-hooks*/}
115+
## خطاطيف المصدر {/*resource-hooks*/}
110116
111-
*Resources* can be accessed by a component without having them as part of their state. For example, a component can read a message from a Promise or read styling information from a context.
117+
يستطيع المكون الوصول *للمصادر* دون امتلاكها كجزء من حالتهم. على سبيل المثال، يمكن للمكون قراء رسالة من وعد (Promise) أو قراءة معلومات التصميم من السياق (Context).
112118
113-
To read a value from a resource, use this Hook:
119+
لقراءة معلومة من مصدر استخدم هذا الخطاف:
114120
115-
- [`use`](/reference/react/use) lets you read the value of a resource like a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or [context](/learn/passing-data-deeply-with-context).
121+
- [`use`](/reference/react/use) يسمح لك بقراء معلومة من مصدر مثل [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) أو [context](/learn/passing-data-deeply-with-context).
116122
117123
```js
118124
function MessageComponent({ messagePromise }) {
@@ -124,16 +130,16 @@ function MessageComponent({ messagePromise }) {
124130
125131
---
126132
127-
## Other Hooks {/*other-hooks*/}
133+
## خطاطيف أخرى {/*other-hooks*/}
128134
129-
These Hooks are mostly useful to library authors and aren't commonly used in the application code.
135+
هذه الخطاطيف مفيدة في الغالب لمؤلفي المكتبات ولا يتم استخدامها بشكل شائع في كود التطبيق.
130136
131-
- [`useDebugValue`](/reference/react/useDebugValue) lets you customize the label React DevTools displays for your custom Hook.
132-
- [`useId`](/reference/react/useId) lets a component associate a unique ID with itself. Typically used with accessibility APIs.
133-
- [`useSyncExternalStore`](/reference/react/useSyncExternalStore) lets a component subscribe to an external store.
137+
- [`useDebugValue`](/reference/react/useDebugValue) يتيح لك تخصيص التسمية التي تعرضها أدوات مطوري React لخطافك المخصص.
138+
- [`useId`](/reference/react/useId) يتيح للمكون ربط معرف فريد بنفسه (unique ID). تستخدم عادة مع واجهات برمجة إمكانية الوصول API.
139+
- [`useSyncExternalStore`](/reference/react/useSyncExternalStore) يتيح للمكون الاشتراك في مُوَزّع خارجي.
134140
135141
---
136142
137-
## Your own Hooks {/*your-own-hooks*/}
143+
## الخطاطيف الخاصة بك {/*your-own-hooks*/}
138144
139-
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.
145+
يمكنك أيضًا [تعريف الخطاطيف المخصصة](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component) الخاصة بك كدوال JavaScript.

0 commit comments

Comments
 (0)