الحالة (State) و useState

ما هي الحالة (State)؟

State بيانات تخصّ المكوّن ويمكن أن تتغيّر مع الوقت (مثل عدّاد أو نص حقل إدخال). عند تغيّر الحالة، تُعيد React رسم المكوّن تلقائيًا.

useState

نستخدم الخطّاف useState لتعريف حالة:

import { useState } from "react";

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

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

شرح السطر const [count, setCount] = useState(0):

• count = القيمة الحالية (تبدأ بـ 0).
• setCount = الدالة الوحيدة المسموح بها لتغيير القيمة.
• useState(0) = القيمة الابتدائية.

القاعدة الذهبية

⚠️ لا تعدّل الحالة مباشرة! استخدم دائمًا دالة التحديث.

// ❌ خطأ — لن تتحدّث الواجهة
count = count + 1;

// ✅ صحيح
setCount(count + 1);

التحديث بناءً على القيمة السابقة

عند الاعتماد على القيمة الحالية، مرّر دالة:

setCount((prev) => prev + 1);

🎯 التالي: التعامل مع الأحداث (Events).