خطافات ReactExplained

24 of 24 rows

الخطاف↕	ماذا يفعل↕	متى تستخدمه↕
الحالة
⤢useState	يحتفظ بقيمة واحدة تُطلق إعادة تصيير عند تغيّرها.	حالة محلية للمكوّن: حقول النماذج، ومفاتيح التبديل، والعدّادات.
⤢useReducer	يحتفظ بحالة تُدار عبر مُقلِّل إجراءات (reducer)، أشبه بمخزن صغير.	الحالة التي تضم عدة حقول مترابطة أو انتقالات معقّدة.
⤢useRef	يحتفظ بقيمة قابلة للتغيير لا تُطلق إعادة تصيير.	الحاويات القابلة للتغيير، والمؤقّتات، والوصول المباشر إلى DOM عبر .current
التأثيرات
⤢useEffect	يشغّل أثرًا جانبيًا بعد التصيير، مع تنظيف اختياري.	جلب البيانات، والاشتراكات، والمزامنة مع نظام خارجي.
⤢Effect cleanup	الدالة التي يُرجعها الأثر تعمل قبل الأثر التالي ومرة أخرى عند فك التركيب.	إلغاء الاشتراكات والمؤقّتات، أو إجهاض طلب جارٍ.
⤢useLayoutEffect	مثل useEffect، لكنه يعمل بشكل متزامن بعد تعديل DOM.	قراءة التخطيط أو كتابته قبل أن يرسم المتصفح (toasts وtooltips).
⤢useEffect vs handlers	معالجات الأحداث تعمل استجابةً لفعل المستخدم؛ أما الآثار فتعمل بعد التصيير من أجل المزامنة.	المنطق الذي يسبّبه المستخدم مكانه المعالج، والمنطق الذي يسبّبه التصيير مكانه الأثر.
⤢StrictMode	في وضع التطوير يركّب المكوّنات مرتين حتى تعمل الآثار ثم تُنظَّف ثم تعمل مجددًا.	كشف الاشتراكات المزدوجة والتنظيف المفقود قبل الإنتاج.
الأداء
⤢useMemo	يخزّن قيمة محسوبة في الذاكرة حتى تتغيّر تبعياتها.	تجنّب إعادة الحسابات المكلفة بين عمليات التصيير؛ غيّر قيمة في التبعيات عمدًا لإبطال الذاكرة.
⤢useCallback	يخزّن مرجع دالة في الذاكرة حتى تتغيّر تبعياتها.	استدعاءات ثابتة تُمرَّر إلى أبناء مخزَّنين في الذاكرة أو تُستخدم كتبعيات.
⤢React.memo	يتخطى إعادة تصيير مكوّن لم تتغيّر خصائصه (props).	المكوّنات الأبناء الثقيلة؛ مرّر دالة مقارنة كوسيطة ثانية حين لا تكفي المساواة السطحية (هو HOC وليس خطافًا).
السياق والمقابض الخارجية
⤢useContext	يقرأ قيمة سياق دون تمرير الخصائص عبر الطبقات (prop drilling).	السمة، أو اللغة، أو مستخدم مصادقة مشترك عبر الشجرة كلها.
⤢useImperativeHandle	يخصّص الكائن الذي يراه الأب من خلال مرجع (ref).	كشف واجهة API محدودة من ابن عبر forwardRef.
التزامن وأخرى
⤢useTransition	يعلّم تحديث الحالة بوصفه غير عاجل كي تبقى الواجهة متجاوبة.	إبقاء حقل الإدخال سريع الاستجابة بينما تُعاد قائمة ثقيلة التصيير.
⤢useDeferredValue	يؤجّل قيمة كي تصبح التحديثات قابلة للمقاطعة.	تقليل وتيرة التصييرات المكلفة (debounce) دون مؤقّتات.
⤢useId	يولّد معرّفًا فريدًا ثابتًا لسمات إمكانية الوصول.	ربط label بحقل الإدخال بين تصيير الخادم والعميل.
⤢use()	يقرأ وعدًا (promise) أو سياقًا أثناء التصيير؛ وهو الخطاف الوحيد الذي يمكن استدعاؤه شرطيًا.	فك وعد مع Suspense، أو قراءة سياق داخل إرجاع مبكر.
⤢useActionState	يحتفظ بحالة تُدار عبر إجراء نموذج، مع علم انتظار (pending) مضمّن.	إرسالات النماذج التي تُرجع أخطاء أو حالة محدّثة لعرضها في مكانها.
⤢useOptimistic	يصيّر قيمة متفائلة في الحال، ثم يعود إلى الحالة الحقيقية عند اكتمال الإجراء.	إظهار إعجاب أو رسالة مُرسلة بينما طلبها إلى الخادم قيد التنفيذ.
⤢useFormStatus	يقرأ حالة الانتظار لعنصر <form> المحيط، دون الحاجة إلى خصائص.	زر إرسال يعطّل نفسه بينما يُرسل النموذج الأب.
⤢useSyncExternalStore	يشترك في مخزن خارج React ويقرأ لقطة واحدة متسقة.	واجهات المتصفح مثل حالة الاتصال، أو مخازن الحالة من طرف ثالث.
⤢useInsertionEffect	يعمل قبل تأثيرات التخطيط، وصُمم لحقن قواعد CSS-in-JS.	مكتبات الأنماط التي يجب أن تُدخل القواعد قبل قراءة التخطيط.
⤢useDebugValue	يعرض تسمية مخصّصة للحالة الداخلية للخطاف في React DevTools.	وسم ما يحتفظ به خطاف مخصّص أثناء تصحيح الأخطاء.
⤢Custom hooks (use*)	خطافك الخاص الذي يركّب الخطافات المدمجة لمشاركة المنطق.	سلوك ذو حالة قابل لإعادة الاستخدام مثل useFetch أو useMediaQuery.