React Hooks: إزاي تتحكم في State بسهولة

React Hooks: ليه كل المبرمجين بيحبوها؟ ​

لو أنت مبرمج React.js، أكيد سمعت عن الـ 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 ​

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

الخلاصة ​

الـ Hooks خلت الكود في React أبسط، أسرع، ومنظم أكتر.
لو عايز تبني تطبيقات قوية، Function Components + Hooks هما طريقك .