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

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

يمنح React المكوّنات حالةً عبر الخطاف useState:

import { useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);
    ...
}

سطر واحد، ثلاثة أجزاء:

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

القاعدة الذهبية: لا تُسنِد قيمة إلى الحالة مباشرةً أبدًا. يؤدي count = 5 إلى حدوث خطأ، لأن count هو const. وحتى لو كان من الممكن تغييره، فلن يعرف React بذلك. يغيّر setCount(5) الحالة ويعيد عرض المكوّن. إعادة العرض هذه هي ما يحدّث الشاشة.