ما هو State؟

عند العمل مع React، واحدة من أهم المفاهيم التي يحتاج أي مطوّر لفهمها هي State.

فالـ State تمثل البيانات الداخلية الخاصة بكل مكون (Component)، وهي التي تحدد كيف سيظهر المكون ويتفاعل مع المستخدم.

الـ State هو عبارة عن كائن (Object) يحتوي على بيانات قابلة للتغيير أثناء عمل التطبيق.

بخلاف Props التي يتم تمريرها من مكون أب إلى مكون ابن ولا يمكن تعديلها داخليًا، فإن الـ State يمكن تحديثه داخل المكون نفسه.

الفرق بين Props و State

  • Props: بيانات يتم تمريرها من مكون خارجي، ثابتة داخل المكون ولا يمكن تعديلها.
  • State: بيانات داخلية خاصة بالمكون نفسه، ويمكن تعديلها باستخدام دوال خاصة مثل setState أو useState.

كيف نستخدم State في React؟

في التطبيقات الحديثة التي تستخدم React Hooks، نستخدم الدالة useState لإدارة حالة المكون.

مثال بسيط:

import { useState } from "react";

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

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

export default Counter;

🔹 في هذا المثال:

  • أنشأنا متغير حالة اسمه count.
  • استخدمنا setCount لتحديث القيمة عند الضغط على الأزرار.
  • كل مرة يتم فيها تحديث الحالة، يقوم React بإعادة Render للمكون لإظهار القيم الجديدة.

لماذا State مهم؟

  • التفاعلية: يسمح لنا بإنشاء واجهات ديناميكية تتغير حسب تفاعل المستخدم.
  • إدارة البيانات: يساعد في تخزين البيانات التي تتغير مع الزمن مثل: عدد النقرات، نصوص الإدخال، أو حالة تسجيل الدخول.
  • إعادة الاستخدام: كل مكون يمكن أن يدير حالته بشكل مستقل، مما يجعل التطبيق منظم وسهل الصيانة.

أفضل الممارسات عند استخدام State

  • اجعل الحالة بسيطة قدر الإمكان.
  • لا تكرر نفس البيانات في أكثر من مكان داخل الـ State.
  • حاول استخدام Props لتمرير البيانات المشتركة واحتفظ بـ State للبيانات المحلية فقط.
  • لا تعدل الـ State مباشرة، بل استخدم الدوال المخصصة مثل setState أو useState.

الخلاصة

الـ State هو العمود الفقري لأي تطبيق مبني باستخدام React.

فهو الذي يمنح المكونات القدرة على التفاعل والتغير بشكل ديناميكي.

مع فهم جيد للـ State والفرق بينه وبين Props، ستتمكن من بناء تطبيقات أكثر مرونة وسهولة في الصيانة.