تعلم React Hooks بطريقة سهلة مع أمثلة عملية

ازيك يا صديقي؟
لو حاولت قبل كده تفهم الـ React Hooks أكتر من مرة ولسه حاسس إنها مش راكبة معاك، يبقى تعالى نبدأها من الأول واحدة واحدة.
في البوست ده هنفهم سوا كل Hook من الـ React Hooks بأسلوب سهل وبسيط مع أمثلة عملية عشان تبقى فاهمها كويس وتعرف تستخدمها في مشاريعك

يعني إيه React Hooks؟ ​

بكل بساطة، الـ React Hooks هي مميزات إضافية بتخليك تستخدم إمكانيات الـ class components (زي الـ state والـ lifecycle methods) جوا functional components.
يعني بدل ما تكتب كود طويل ومعقد، تقدر تعمل نفس الوظايف بسطرين كده

الفكرة إن الـ Hooks بقت الحل العصري لإدارة الـ state، والتعامل مع الأحداث، وجلب البيانات من الـ API... وكل ده بطريقة مختصرة وسهلة الفهم.

---

الـ useState ​

أول Hook وده أكتر واحد هتستخدمه!
الـ useState بيخليك تضيف state للكومبوننت، يعني تقدر تحتفظ بقيمة معينة وتتغير مع المستخدم.

مثلاً
const [count, setCount] = useState(0);

في السطر ده:
• count هو القيمة الحالية
• setCount هي الفانكشن اللي بتغير القيمة

يعني لو عندك زرار بيزود الرقم، تقدر تكتب كده:

import { useState } from "react";

function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
You clicked {count} times </button>
);
}

---

الـ useEffect ​

الـ useEffect بيشتغل لما يحصل حاجة معينة، زي أول مرة الكومبوننت يتعرض أو لما الـ state تتغير.
وده بيغنيك عن دوال الـ lifecycle زي `componentDidMount`.

مثلاً

useEffect(() => {
console.log("Component loaded or count changed");
}, [count]);

القوسين المربعين [] دول بيحددوا إيه اللي لما يتغير، يخلي الـ effect يشتغل.
يعني هنا كل ما count تتغير هيتنفذ الكود اللي جواه.

---

الـ useContext ​

لو عندك بيانات مشتركة بين كذا كومبوننت (زي الـ theme أو المستخدم الحالي)، يبقى useContext هو الحل.
بدل ما تمرر props لكل مستوى، تقدر تشارك الداتا مباشرة.

المثال ده يوضح:

const ThemeContext = React.createContext("light");

function App() {
return (
<ThemeContext.Provider value="dark"> <Toolbar />
</ThemeContext.Provider>
);
}

function Toolbar() {
const theme = useContext(ThemeContext);
return <div>Current theme: {theme}</div>;
}

هنا الكود بقى بسيط جدًا ومفهوم

---

الـ useReducer ​

الـ useReducer شبه الـ useState، بس لما الـ state تكون كبيرة ومعقدة.
بتخليك تتحكم في الحالة بخطوات منظمة زي فكرة الـ Redux.

شوف المثال ده

function reducer(state, action) {
switch (action.type) {
case "increment":
return { count: state.count + 1 };
case "decrement":
return { count: state.count - 1 };
default:
return state;
}
}

function Counter() {
const [state, dispatch] = useReducer(reducer, { count: 0 });
return (
<>
<button onClick={() => dispatch({ type: "decrement" })}>-</button> <span>{state.count}</span>
<button onClick={() => dispatch({ type: "increment" })}>+</button>
</>
);
}

---

الـ useRef ​

لو عاوز توصل لعناصر معينة في الصفحة (زي input أو button) وتتعامل معاها من غير ما تعيد رسم الكومبوننت كله، استخدم useRef.

const inputRef = useRef(null);

مثلاً

function FocusInput() {
const inputRef = useRef(null);
const handleFocus = () => {
inputRef.current.focus();
};
return (
<> <input ref={inputRef} type="text" /> <button onClick={handleFocus}>Focus me!</button>
</>
);
}

النتيجة؟ أول ما تدوس على الزرار، الـ input هياخد الفوكس فورًا.

---

الـ useMemo و useCallback ​

الاتنين دول من أهم أدوات تحسين الأداء في React.

• useMemo بيحسب قيمة معينة ويحتفظ بيها لو مدخلاتها متغيرتش.
• useCallback بيحتفظ بنسخة من الفانكشن عشان متتعملش من جديد في كل render.

مثال سريع

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);

بكده التطبيق بتاعك هيبقى أسرع وأكتر كفاءة

---

نصائح مهمة وأخطاء شائعة ​

قبل ما تمشي، خد بالك من شوية حاجات:

• متحطش Hooks جوا شروط أو loops.
• استخدمهم بس جوا الـ functional components.
• دايمًا حافظ على ترتيب الاستدعاء بتاعهم.

الخلاصة ​

الـ React Hooks مش مجرد إضافات جديدة، دي طريقة حديثة وسهلة تخليك تكتب كود أنضف وأوضح.
كل Hook منهم ليه دور مهم، ومع الوقت هتحس قد إيه بيخلوا الكود بتاعك منظم وسريع.

لو البوست عجبك يا صديقي، شاركه واكتبلي في الكومنتات إيه أكتر Hook بتستخدمه في مشاريعك؟