إيه اللي بيخلي الـHooks دي تريند في عالم الـ Frontend ؟

[x32x01]

لو أنت مبرمج React.js، أكيد سمعت عن الـHooks. لكن إيه اللي بيخلي الـHooks دي تريند في عالم الـFrontend؟

إيه هي الـHooks؟​

بكل بساطة، الـHooks هي هدية من React.js (من أول النسخة 16. للمطورين. بتسمحلك تتحكم في الـState وتدير الـLifecycle للمكونات بطريقة عبقرية، وكل ده من غير ما تضطر تستخدم الـClass Components.

ليه الـHooks غيرت اللعبة؟​

قبل ظهور الـHooks، كان لازم تتعامل مع Class Components عشان تتحكم في الـState أو الـLifecycle. كان ده بيزود التعقيد وبياخد وقتك. لكن دلوقتي مع الـHooks، تقدر تعمل كل ده بمرونة وسهولة باستخدام Function Components. الكود بقى أبسط، أسرع، وأكتر تنظيم!

مثال سريع:
useState: عايز تدير الـState؟:

const [count, setCount] = useState(0);

useEffect: لو عايز تنفذ كود لما المكون يظهر لأول مرة أو لما الـState تتغير

useEffect(() => {
  console.log("Component mounted or updated!");
}, [dependency]);

نصائح عملية لاستخدام الـHooks:​

- لو أنت لسه جديد على الـHooks، ابدأ بـuseState وuseEffect، دول أساس كل الـHooks الأخرى.
- استخدم الـCustom Hooks بعد ما تتقن الأساسيات، جرب تبني Hooks خاصة بيك لإعادة استخدام الكود عبر المكونات.
- تجنب الـSide Effects خارج الـuseEffect: دايمًا نفذ الـSide Effects (زي جلب البيانات أو تعديل DOM) داخل الـuseEffect عشان تتجنب المشاكل.