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

كل خطّاف (Hook) أساسي بالعربي: ماذا يفعل، صياغته، مثال يوضّحه، وأشهر الأخطاء — JSX يحتاج ترجمة (Babel) وبيئة React كاملة غير متوفّرة في محرّر المتصفح، فلا يوجد تشغيل حي هنا. حاليًا 7 خطّاف — والقائمة تكبر.

خطّافات الحالة والتأثيرات

useLayoutEffect()

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

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

خطّافات الأداء والتزامن

useMemo()

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

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

useCallback()

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

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

useTransition()

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

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

useDeferredValue()

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

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

خطّافات متقدّمة وواجهات API

useId()

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

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

useActionState()

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

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

🎓 تريد التعلم بالترتيب بدل المرجع السريع؟ ابدأ من مسار REACT الكامل بالعربي.