كيف أتعامل مع الحالة (State) في مكون React؟ (useState)

الطريقة الأكثر شيوعًا اليوم: الـ Hook useState:

import { useState } from 'react';

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

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

useState(0) يعيد القيمة الحالية ودالة لتغييرها. عند استدعاء setCount، يعيد React رسم المكون بالقيمة الجديدة.

قواعد مهمة

• لا تعدّل الحالة مباشرة (count++)، استخدم دالة التحديث.
• عندما تعتمد القيمة الجديدة على السابقة: setCount(c => c + 1).

this.state طريقة مكونات الكلاس القديمة.