State في React: مفهوم الحالة واستخدام useState

بعد أن فهمت Props، ستلاحظ أن بعض البيانات تحتاج أن تتغير مع الوقت. مثل عدد النقرات، قيمة المدخلات، أو فتح/إغلاق نافذة. هنا يأتي دور State.

State هي قلب التفاعل في React. بدونها، الواجهة ستكون ثابتة. ومعها، يصبح كل جزء من الصفحة يستجيب للمستخدم فوراً.

ما هي State في React؟

State هي بيانات داخلية للمكوّن. عندما تتغير، React يُعيد رسم الواجهة تلقائياً. هذا يجعل التطبيق تفاعليًا بدون كتابة كود يدوي لتحديث DOM.

التعريف البسيط: State = بيانات قابلة للتغيير داخل المكوّن تُحدّث الواجهة تلقائياً.

أول مثال: عدّاد بسيط باستخدام useState

import { useState } from "react";

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

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

كل مرة تضغط على زر، تتغير قيمة count ويتم تحديث الواجهة تلقائياً. هذه أبسط طريقة لفهم علاقة State بالتفاعل.

ماذا تعني useState؟

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

مثال: إظهار/إخفاء عنصر باستخدام State

function Toggle() {
  const [open, setOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setOpen(!open)}>تبديل</button>
      {open && <p>هذا النص يظهر ويختفي</p>}
    </div>
  );
}

هنا نخزّن حالة open. عندما تتغير، يظهر النص أو يختفي. هذا النمط يُستخدم في القوائم، النوافذ المنبثقة، والرسائل.

مثال: إدخال نص (Input) مع useState

function NameInput() {
  const [name, setName] = useState("");

  return (
    <div>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="اكتب اسمك"
      />
      <p>مرحباً {name}</p>
    </div>
  );
}

في هذا المثال، قيمة name تتغير مع كل حرف يكتبه المستخدم، ويتم عرضها مباشرة في الواجهة.

نصائح مهمة عند استخدام State

• قسّم الـ State حسب الحاجة، ولا تضع كل شيء في متغيّر واحد.
• إذا كانت القيمة تعتمد على القيمة السابقة، استخدم التحديث الوظيفي.

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

هذا الأسلوب يمنع الأخطاء عندما يكون هناك أكثر من تحديث متتالي لنفس القيمة.

الأسئلة الشائعة — FAQ

ما هي State في React؟

هي بيانات داخلية تتغير مع الوقت وتعيد تحديث الواجهة تلقائياً.

متى أستخدم useState؟

عندما تحتاج لتخزين قيمة تتغير مع التفاعل مثل العدّاد أو إدخال نموذج.

ما الفرق بين Props و State؟

Props تأتي من المكوّن الأب وهي للقراءة فقط، بينما State بيانات داخلية تتغير داخل المكوّن نفسه.

لماذا لا أستخدم التعديل المباشر مثل count++؟

لأن React لا يعرف بالتغيير المباشر. يجب استخدام setState لإعلام React وإعادة تحديث الواجهة.

كيف أُحدث State بناءً على القيمة السابقة؟

استخدم التحديث الوظيفي مثل setCount((prev) => prev + 1) لضمان الحصول على أحدث قيمة.