تعلم useState في React بسهولة للمبتدئين

المرة دي هنبدأ بحجر الأساس لكل حاجة في الـHooks: useState.
لو أنت لسه جديد على الـHooks، يبقى الـuseState هو الباب اللي هتدخل منه عالم الـReact بشكل سلس ومرتب .

إيه هو الـuseState؟ ​

الـuseState هو Hook بسيط لكنه قوي جدًا. بيخليك تدير الـState جوه الـFunction Components بطريقة مريحة وسهلة.
في سطرين كود تقدر تحدد قيمة وتغيرها وقت ما تحب، وكل ده من غير أي تعقيد أو وجع دماغ .

إزاي نستخدم الـuseState؟ ​

بكل بساطة، هتستدعي الـuseState وتديله قيمة ابتدائية، ويرجعلك مصفوفة فيها عنصرين:

• الأول: القيمة الحالية
• التاني: دالة لتغيير القيمة دي

مثال عملي:

import React, { useState } from 'react';

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

return ( <div> <p>عدد الضغطات: {count}</p>
<button onClick={() => setCount(count + 1)}>زيادة</button> </div>
);
}

export default Counter;

يعني لو عايز تعد كام مرة المستخدم ضغط على زر، الـuseState هيسهلك تخزن الرقم وتغيره بسهولة.

ليه الـuseState مهم؟ ​

• بيسهّل شغلك بدل ما تتعقد مع Class Components والـthis.state
• يخليك تكتب كود نظيف، مقروء ومنظم
• يتيحلك تركز على اللي عايز تعمله بدل ما تضيع وقتك في فهم حاجة معقدة

نصائح عملية لاستخدام useState ​

• لو عندك أكثر من حالة (state)، استخدم أكتر من useState بدل ما تجمع كل حاجة في واحد
• حاول دايمًا تخلي القيم اللي بتخزنها بسيطة عشان تديرها بسهولة
• استخدم دوال واضحة لتحديث الـstate بدل كتابة لوجيك معقد داخل الـonClick