⚛️ مرجع خطّافات React بالعربي

useState()

خطّاف الحالة المحلّية

useState يعطي المكوّن قيمة تُحفَظ بين عمليات العرض، مع دالة لتحديثها تُعيد رسم المكوّن تلقائيًا.

useEffect()

خطّاف التأثيرات الجانبية

useEffect يُشغّل كودًا بعد أن يرسم React الشاشة فعليًا — لمزامنة المكوّن مع نظام خارجي (شبكة، مؤقّت، اشتراك).

useLayoutEffect()

تأثير متزامن قبل الرسم على الشاشة

نسخة من useEffect تعمل بشكل متزامن قبل أن يرسم المتصفح الشاشة — لقياس DOM وتعديل الحالة دون أن يرى المستخدم وميضًا.

useRef()

مرجع يبقى بين عمليات العرض

useRef يعطي صندوقًا (كائن فيه current) يستمرّ بين عمليات العرض، وتغيّره لا يسبّب إعادة رسم المكوّن.

useMemo()

حفظ نتيجة حساب مكلف

useMemo يحفظ نتيجة عملية حسابية بين عمليات العرض، ويعيد حسابها فقط عند تغيّر الاعتماديات المذكورة.

useCallback()

حفظ مرجع دالة بين عمليات العرض

useCallback يحفظ نفس مرجع الدالة بين عمليات العرض طالما لم تتغيّر الاعتماديات، لمنع إعادة إنشائها في كل رندر.

useTransition()

تحديد تحديث حالة كغير عاجل

useTransition يسمح بتحديد تحديث حالة كـ Transition غير عاجل، قابل للمقاطعة، لإبقاء الواجهة متجاوبة أثناء رندر مكلف.

useDeferredValue()

تأجيل استخدام قيمة قادمة من الخارج

useDeferredValue يُرجع نسخة "متأخّرة" من قيمة، يستخدمها React لتأجيل رندر جزء مكلف دون التحكّم بمصدر القيمة نفسه.

useContext()

قراءة قيمة سياق دون تمرير props

useContext يسمح لأي مكوّن بقراءة قيمة سياق (Context) معرَّفة في مكوّن أعلى، دون تمريرها يدويًا عبر كل مستوى props.

useReducer()

إدارة حالة معقّدة عبر دالة reducer

useReducer بديل لـ useState لإدارة حالة معقّدة عبر دالة reducer تستقبل الحالة والإجراء (action) وتُرجع الحالة الجديدة.

useId()

معرّف فريد ثابت بين الخادم والمتصفح

useId يولّد معرّفًا فريدًا مناسبًا لخصائص إمكانية الوصول (accessibility)، متطابقًا بين رسم الخادم ورسم المتصفح.

useActionState()

إدارة حالة نموذج مبنية على Action

useActionState يربط حالة بنتيجة تنفيذ دالة غير متزامنة (Action)، مع إدارة تلقائية لحالة "جارٍ التنفيذ" — مثالي لنماذج <form>.