
- بواسطة x32x01 ||
الـHooks في React غيرت شكل البرمجة في الـFrontend. وفرت علينا وقت وجهد، وبقت حاجة أساسية لأي مبرمج React.
لكن ساعات بنلاقي نفسنا بنكرر كود في أكتر من مكان، وهنا بييجي دور Custom Hooks
.
في البوست ده هنتعلم إزاي نعمل الـHook بتاعنا بنفسنا خطوة خطوة.
1. حدد المشكلة اللي عايز تحلها
أول خطوة: فكر إيه الحاجة اللي بتعملها كتير وبتتكرر في الكود.
2. جرب الكود في كومبوننت عادي
قبل ما تحوله لـHook، اكتب الكود في كومبوننت عادي.
مثال: لو عايز تعرف حجم نافذة المتصفح (width & height)، استخدم useState وuseEffect عادي.
الفكرة: تتأكد إن الكود شغال صح قبل تحويله لـHook.
3. حوّل الكود لـ Hook
بمجرد ما الكود جاهز:
4. استخدم Hooks تانية جوه الـ Hook الجديد
الحلو في Custom Hooks إنك ممكن تستخدم أي Hook موجود بالفعل.
مثال: لو محتاج state أو تأثير جانبي side effect، استخدم useState وuseEffect جوا الـHook.
5. ارجع البيانات اللي محتاجها
في الآخر، قرر إيه القيم أو الدوال اللي هترجعها.
مثال عملي: Custom Hook لحجم نافذة المتصفح
6. استخدم الـ Hook في مشاريعك
بمجرد ما الكود جاهز، استخدمه في أي كومبوننت:
مثال:
هتلاقي القيم بتتحدث تلقائي عند تغيير حجم النافذة.
7. جرب، اختبر وشارك
بعد ما تخلص الـHook:
لكن ساعات بنلاقي نفسنا بنكرر كود في أكتر من مكان، وهنا بييجي دور Custom Hooks

في البوست ده هنتعلم إزاي نعمل الـHook بتاعنا بنفسنا خطوة خطوة.
1. حدد المشكلة اللي عايز تحلها
أول خطوة: فكر إيه الحاجة اللي بتعملها كتير وبتتكرر في الكود.- ممكن يكون استدعاء API
- التعامل مع الـLocal Storage
- أو إدارة حالة معينة
2. جرب الكود في كومبوننت عادي
قبل ما تحوله لـHook، اكتب الكود في كومبوننت عادي.مثال: لو عايز تعرف حجم نافذة المتصفح (width & height)، استخدم useState وuseEffect عادي.
الفكرة: تتأكد إن الكود شغال صح قبل تحويله لـHook.
3. حوّل الكود لـ Hook
بمجرد ما الكود جاهز:- أنقله لملف جديد
- سمّي الـHook الجديد باسم يبدأ بـ use
- مثال: لو بيتعامل مع حجم النافذة → useWindowSize
4. استخدم Hooks تانية جوه الـ Hook الجديد
الحلو في Custom Hooks إنك ممكن تستخدم أي Hook موجود بالفعل.مثال: لو محتاج state أو تأثير جانبي side effect، استخدم useState وuseEffect جوا الـHook.
5. ارجع البيانات اللي محتاجها
في الآخر، قرر إيه القيم أو الدوال اللي هترجعها.- ممكن ترجّع قيمة واحدة أو أكتر
- استخدم مصفوفة أو كائن لتسهيل الاستخدام في الكومبوننتات
مثال عملي: Custom Hook لحجم نافذة المتصفح
Code:
import { useState, useEffect } from 'react';
function useWindowSize() {
const [size, setSize] = useState({
width: window.innerWidth,
height: window.innerHeight
});
useEffect(() => {
const handleResize = () => {
setSize({
width: window.innerWidth,
height: window.innerHeight
});
};
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return size;
}
export default useWindowSize;
6. استخدم الـ Hook في مشاريعك
بمجرد ما الكود جاهز، استخدمه في أي كومبوننت:مثال:
const { width, height } = useWindowSize();
هتلاقي القيم بتتحدث تلقائي عند تغيير حجم النافذة.
7. جرب، اختبر وشارك
بعد ما تخلص الـHook:- جربه كويس في حالات مختلفة
- لو مفيد، شاركه مع زمايلك أو على GitHub عشان الناس تستفيد
التعديل الأخير: