خلاصة الـ React Hooks بأسلوب بسيط وواضح

[x32x01]

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

طيب في الاول يعني إيه أصلا React Hooks؟ ​

هي ببساطة مميزات جديدة بتضاف على الكومبوننتس اللي مكتوبة بـ functional components بدل ما كنا محتاجين نعمل كل حاجة بـclass components يعني بدل ما نحتاج نكتب كود اطول لا نقدر نستخدم Hooks عشان نتحكم في الـstate والحاجات التانية اللي بنحتاجها بأقل كود.

كدا فهمنا يعني اي React Hooks تعالي نفهم سوا كل Hook وناخد مثال عملي عليها:​

1. useState
ده من أشهرهم.. بنستخدمه عشان نعمل state جوه الكومبوننت يعني لو انتا عاوز تغير قيمة معينة جوا الكومبوننت وتحتفظ بيها معاك تقدر تستخدمه.
مثال عشان الدنيا توضحلك: const [count, setCount] = useState(0);
في المثال دا count هو القيمة الحالية وsetCount هي الفنكشن اللي بتغير القيمة.

2. useEffect
لو محتاج تعمل حاجة معينه بعد ما الكومبوننت يتعرض أو لما يحصل تغيير في state معين هتستخدم use effect. زي مثلا لما تجيب بيانات من API أو تعمل تحديث لعنصر معين وكدا.
مثال عملي عشان الدنيا توضحلك:

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

الـ [ ] يا صديقي دي بتحدد إيه اللي لما يتغير هيخلي الـuseEffect يشتغل.

3. useContext
طيب لو عندك داتا عاوز تشاركها بين أكتر من كومبوننت؟
هنا يجي دور useContext هي اللي هتسهل عليك دا بدل ما تمرر الداتا في كل مستوي تقدر تستخدمها في أي مكان.
هتعمل Context الأول وبعدين تستخدم useContext.

4. useReducer
دي بقا زي useState بس للـstate المعقدة والكبيرة شوية. يعني لو عندك state فيها أكتر من جزء فرعي ومحتاج تتحكم فيهم بالتفصيل هيبقى مناسب ليك تستخدم useReducer هوا بيتشابه شوية مع Redux لو جربته قبل كده.
شوف كدا المثال دا: const [state, dispatch] = useReducer(reducer, initialState);

5. useRef
لو عندك input أو أي عنصر عاوز توصله علي طول وتعمل عليه تعديل من غير ما تعمل إعادة عرض للكومبوننت يبقى تستخدم useRef ممكن تشوفها كتثبيت لمكان معين في DOM.
const inputRef = useRef(null);

6. useMemo و useCallback
دول بقى لما تيجي تتعامل مع كود تقيل وعاوز تقلل التحديثات أو الـRendering اللي ملهاش لازمه هما دول اللي هيحسنوا الأداء.
ـ useMemo: بتحسب حاجة وتحتفظ بيها لو حاجة معينة متغيرتش.
ـ useCallback: بتعمل نفس الفكرة مع الفانكشنز.
وبكده نكون خلصنا شرحنا عن الـ React Hooks. لو عندك سؤال أو استفسار، اكتب في الكومنتات. ومتنساش تقول رأيك في الشرح يا صديقي