شرح useState في React - دليلك الشامل لإدارة حالة المكونات

🚀 اكتشف سحر التفاعلية مع useState في React

بعد أن تعلمت كيف تبني المكونات (Components) وتعرض البيانات، حان الوقت الآن لنجعل تطبيقك "حياً" ويتفاعل مع المستخدم.

في عالم البرمجة، نحتاج دائماً إلى طريقة لتذكر الأشياء التي تتغير أثناء استخدام التطبيق (مثل: هل الزر مضغوط؟ ما هو النص المكتوب في الحقل؟ هل القائمة مفتوحة أم مغلقة؟). هنا يأتي دور useState.

🧐 ما هي الـ State (الحالة) ببساطة؟

تخيل أن الـ State هي "ذاكرة قصيرة المدى" للمكون الخاص بك. هي عبارة عن بيانات يمكن أن تتغير بمرور الوقت، وعندما تتغير هذه البيانات، يقوم React تلقائياً بإعادة رسم (Re-render) المكون على الشاشة ليظهر التحديث الجديد للمستخدم فوراً.

لماذا لا نستخدم المتغيرات العادية (let أو const)؟ لأن React لا يعرف متى تتغير المتغيرات العادية، وبالتالي لن يقوم بتحديث الشاشة. أما useState فهي تخبر React: "لقد تغيرت القيمة، من فضلك قم بتحديث الواجهة الآن!" ⚡

🛠️ كيف نستخدم useState؟ (الخطوات العملية)

لكي نستخدم useState في مكوننا، يجب أن نتبع ثلاث خطوات بسيطة:

1. استيراد الـ Hook

يجب أولاً أن نخبر React أننا نريد استخدام هذه الميزة من خلال استيرادها في أعلى الملف.

import React, { useState } from 'react'; // استيراد useState من مكتبة ريأكت

2. تعريف الحالة (Initialization)

نكتب useState داخل المكون. هذه الدالة تعطينا شيئين مهمين جداً:

1. القيمة الحالية (Current State): المتغير الذي يحمل القيمة.
2. دالة التحديث (Setter Function): الدالة التي نستخدمها لتغيير هذه القيمة.

الصيغة تكون كالتالي: const [state, setState] = useState(initialValue);

• state: اسم المتغير (يمكنك تسميته أي شيء).
• setState: الدالة التي ستغير القيمة (يجب أن تبدأ بكلمة set).
• initialValue: القيمة البدائية التي يبدأ بها التطبيق.

📝 مثال عملي 1: عداد بسيط (The Counter)

لنطبق ما تعلمناه في مثال "العداد". نريد زرّاً عند الضغط عليه يزيد الرقم المعروض على الشاشة.

import React, { useState } from 'react';

function Counter() {
  // 1. تعريف الحالة: القيمة البدائية هي 0
  const [count, setCount] = useState(0);

  return (
    <div style={{ textAlign: 'center', marginTop: '20px' }}>
      <h2>عداد النقرات: {count}</h2> 
      
      {/* 2. عند الضغط على الزر، نستدعي دالة setCount لتحديث القيمة */}
      <button onClick={() => setCount(count + 1)}>
        زيادة الرقم ➕
      </button>
      
      <button onClick={() => setCount(count - 1)}>
        نقصان الرقم ➖
      </button>
    </div>
  );
}

export default Counter;

شرح ما حدث في الكود:

• أنشأنا حالة اسمها count تبدأ من 0.
• عندما يضغط المستخدم على زر الزيادة، يتم تنفيذ setCount(count + 1).
• React يلاحظ أن القيمة تغيرت، فيقوم فوراً بتحديث الرقم المعروض في صفحة الويب.

📝 مثال عملي 2: تبديل الحالة (Toggle Switch)

يمكننا استخدام useState مع القيم المنطقية (Boolean) مثل true و false. لنصنع زرّاً يظهر ويخفي نصاً معيناً.

import React, { useState } from 'react';

function ToggleText() {
  // تعريف الحالة: القيمة البدائية هي false (مخفي)
  const [isVisible, setIsVisible] = useState(false);

  return (
    <div style={{ textAlign: 'center', marginTop: '20px' }}>
      <button onClick={() => setIsVisible(!isVisible)}>
        {isVisible ? 'إخفاء النص 🙈' : 'إظهار النص 👁️'}
      </button>

      {/* عرض النص فقط إذا كانت قيمة isVisible تساوي true */}
      {isVisible && <p>مرحباً بك في كودكس أكاديمي! 🎉</p>}
    </div>
  );
}

export default ToggleText;

شرح الفكرة:

• استخدمنا !isVisible وهي تعني "اعكس القيمة الحالية". إذا كانت true تصبح false والعكس.
• استخدمنا عامل الربط && لعرض الفقرة فقط عندما تكون الحالة true.

⚠️ ملاحظات هامة جداً للمبتدئين

1. لا تغير الحالة مباشرة: لا تقم أبداً بكتابة count = count + 1. هذا لن يعمل لأن React لن يشعر بالتغيير. استخدم دائماً الدالة المخصصة setCount.
2. مكان التعريف: يجب أن يتم تعريف useState في أعلى المكون (Top Level)، لا تضعها داخل حلقات for أو جمل if.
3. التسمية: من المتعارف عليه برمجياً تسمية المتغير بـ name والدالة بـ setName.

🎓 ماذا سنتعلم في الدرس القادم؟

الآن بعد أن تعلمت كيف تجعل المكون يتفاعل مع المستخدم باستخدام useState 🥳، قد تتساءل: "كيف يمكنني التعامل مع المدخلات التي يكتبها المستخدم في الحقول (Inputs) بشكل احترافي؟"

في الدرس القادم، سنتعلم "التعامل مع النماذج (Handling Forms)" وكيف نربط ما يكتبه المستخدم في الـ Input بـ useState لحظة بلحظة! نراك هناك! 👋