Hooks

ما هي Hooks في React؟

Hooks هي دوال جاهزة من React تسمح لك باستخدام الحالة (state)، التأثيرات (effects)، السياق (context) وغيرها داخل المكوّنات الدالّية من دون الحاجة لكتابة مكوّنات صنفية (class components). النتيجة: كود أبسط، قابل لإعادة الاستخدام، وأسهل للاختبار والصيانة. react.dev

لماذا نستخدمها؟ (الفوائد سريعًا)

• تقلّل تكرار الكود عبر استخراج منطق قابل لإعادة الاستخدام في Custom Hooks.
• تجعل المكوّنات الدالّية قوية مثل المكوّنات الصنفية من دون تعقيد lifecycle.
• تساعد على الأداء (مذكّرات، انتقالات غير حاجبة، تأجيل تحديثات…).
• تعمل بشكل ممتاز مع ميزات React الحديثة مثل Concurrent Rendering وServer Components. react.dev

ملاحظة صغيرة: كتبتَ “react 13”. لا يوجد إصدار باسم React 13؛ آخر إصدارات React حاليًا هو React 19.x. القائمة التالية مطابقة لمرجع React الرسمي (v19.2 في تاريخ اليوم 31 أكتوبر 2025). react.dev+1

تعداد Hooks المدمجة في React 19 (من دون شرح الاستخدام)

أساسيات الحالة والسياق

• useState
• useReducer
• useContext react.dev

المراجع (Refs)

• useRef
• useImperativeHandle react.dev

التأثيرات (Effects)

• useEffect
• useLayoutEffect
• useInsertionEffect
• جديد: useEffectEvent (لاستخراج منطق غير تفاعلي من داخل الـ Effects) react.dev

تحسين الأداء والمزامنة

• useMemo
• useCallback
• useTransition
• useDeferredValue
• useSyncExternalStore react.dev

تعريفات ومعرّفات

• useId
• useDebugValue react.dev

للأكشنات والتجربة المتفائلة (جديد في React 19)

• useActionState (إدارة حالة الأكشنات ونتائجها)
• useOptimistic (عرض حالة “متفائلة” أثناء تنفيذ عملية غير متزامنة) react.dev+2react.dev+2

Hook إضافي في حزمة react-dom

• useFormStatus (للوصول لحالة الفورم من داخل عناصر متداخلة) react.dev

ملاحظة مرجعية: هناك API باسم use في React 19 لكنه ليس Hook (هو ضمن الـ APIs العامة)، لذلك لم أدرجه ضمن قائمة الـ Hooks. react.dev