تعلم عمل Custom Hooks في React بسهولة

x32x01
  • بواسطة x32x01 ||
الـHooks في React غيرت شكل البرمجة في الـFrontend. وفرت علينا وقت وجهد، وبقت حاجة أساسية لأي مبرمج React.
لكن ساعات بنلاقي نفسنا بنكرر كود في أكتر من مكان، وهنا بييجي دور Custom Hooks 💡.
في البوست ده هنتعلم إزاي نعمل الـHook بتاعنا بنفسنا خطوة خطوة.

1. حدد المشكلة اللي عايز تحلها 🕵️‍♂️

أول خطوة: فكر إيه الحاجة اللي بتعملها كتير وبتتكرر في الكود.
  • ممكن يكون استدعاء API
  • التعامل مع الـLocal Storage
  • أو إدارة حالة معينة
لو بتكرر الكود في أكتر من كومبوننت، دي علامة إنك محتاج Custom Hook.

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 عشان الناس تستفيد
 
التعديل الأخير:
المواضيع ذات الصلة
x32x01
الردود
0
المشاهدات
346
x32x01
x32x01
x32x01
الردود
0
المشاهدات
314
x32x01
x32x01
x32x01
الردود
0
المشاهدات
602
x32x01
x32x01
x32x01
الردود
0
المشاهدات
425
x32x01
x32x01
x32x01
الردود
0
المشاهدات
564
x32x01
x32x01
x32x01
الردود
0
المشاهدات
547
x32x01
x32x01
x32x01
الردود
0
المشاهدات
324
x32x01
x32x01
x32x01
الردود
0
المشاهدات
370
x32x01
x32x01
x32x01
الردود
0
المشاهدات
652
x32x01
x32x01
x32x01
الردود
0
المشاهدات
347
x32x01
x32x01
الدخول أو التسجيل السريع
نسيت كلمة مرورك؟
إحصائيات المنتدى
المواضيع
1,830
المشاركات
2,027
أعضاء أكتب كود
464
أخر عضو
رشن7
عودة
أعلى