الجانب المظلم لـ useState في React 🚀#

يلا نتكلم عن 4 مشاكل كبيرة بتقع فيها وانت بتستخدم useState في React، وهنشوف ازاي نحلها بطريقة محترفة 💪

1. نسيان الـ Previous State 😱#

معظم المبتدئين بيقعوا في الغلطة دي. تعالى نشوف مثال:

const [counter, setCounter] = useState(0);

// طريقة غلط ❌
const incrementCounter = () => {
    setCounter(counter + 1);
};

// الطريقة الصح ✅
const incrementCounter = () => {
    setCounter(prevCounter => prevCounter + 1);
};

ليه الطريقة التانية أحسن؟ 🤔

• React بتعمل حاجة اسمها batching للـ updates
• يعني ممكن تلاقي كذا update بيحصلوا مع بعض
• لما تستخدم الـ function form، بتضمن إنك شغال على آخر version من الـ state

2. مشكلة الـ State Immutability 🔒#

كتير مننا بيقع في فخ تغيير الـ state مباشرة. بص على المثال ده:

const [profile, setProfile] = useState({
    name: 'Ahmed',
    age: 25
});

// طريقة غلط ❌
const updateAge = () => {
    profile.age = 26;
    setProfile(profile);
};

// الطريقة الصح ✅
const updateAge = () => {
    setProfile({
        ...profile,
        age: 26
    });
};

في الحالة دي، profile.age هيكون 26، لكن الـ UI هيظل يعرض 25 لأن React مش عارف إن فيه تغيير حصل لإن مفيش rerender حصل لو فيه أجزاء تانية من الكود معتمدة على الـstate القديمة، التغييرات المفاجئة دي ممكن تؤدي لأخطاء أو تصرفات غريبة في التطبيق.

ليه لازم نحافظ على الـ immutability؟ 🎯

• بيساعد React تعرف إن فيه تغيير حصل
• بيخلي الـ app أسرع وأكفأ
• بيمنع bugs كتير ممكن تحصل

3. فهم الـ Asynchronous Updates 🔄#

ممكن تتوقع إن الـstate تتغير فورًا بعد استدعاء setState، لكن في الواقع، React بتجمع التحديثات دي علشان تحسن الأداء ، الpatching إتكلمت عنه قبل كدا في مقالة :(

React بتعمل الـ state updates بطريقة async، يعني مش على طول. تعالى نشوف مثال:

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

// طريقة غلط ❌
const incrementTwice = () => {
    setCount(count + 1);
    setCount(count + 1);
};

// الطريقة الصح ✅
const incrementTwice = () => {
    setCount(prevCount => prevCount + 1);
    setCount(prevCount => prevCount + 1);
};

ليه الموضوع ده مهم؟ 🎯

• بيضمن إن كل update شغال على آخر version من الـ state
• بيمنع الـ race conditions
• بيحسن الـ performance

4. استخدام State للـ Derived Data 📊#

مش كل حاجة محتاجة state! في حاجات ممكن نحسبها على طول من الـ props أو state موجود.

// طريقة غلط ❌
const UserGreeting = ({ name }) => {
    const [greeting, setGreeting] = useState(`welcome ${name}`);
    return <h1>{greeting}</h1>;
};

// الطريقة الصح ✅
const UserGreeting = ({ name }) => {
    const greeting = `welcome ${name}`;
    return <h1>{greeting}</h1>;
};

ليه ده أحسن؟ 💡

• بيقلل الـ complexity
• مفيش داعي نتتبع state إضافي
• الكود أنضف وأسهل في الفهم

نصائح عامة 🌟#

1. دايماً استخدم الـ functional update مع الـ state اللي بيعتمد على نفسه
2. متغيرش الـ state مباشرة، استخدم دايماً setState
3. فكر كويس قبل ما تعمل state جديد: هل فعلاً محتاجه؟
4. اعمل testing كويس للـ state updates بتاعتك

الخلاصة 🎉#

استخدام useState بالطريقة الصح هيخلي الـ app بتاعك:

• أسرع ✨
• أسهل في الصيانة 🛠
• أقل في الـ bugs 🐛
• أكثر قابلية للتوسع 📈

مش مهم بس تعرف ازاي تستخدم useState، المهم تعرف ازاي تستخدمه صح! 💪

Join our whatsapp group here
My Channel here