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

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

تمنح React المكونات حالة (state) من خلال الخطاف useState:

import { useState } from 'react';

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

سطر واحد، ثلاثة عناصر:

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

القاعدة الذهبية: لا تقم أبدًا بالتعديل المباشر على الحالة (state). استخدام count = 5 يغير متغيرًا لا يراقبه React. أما استخدام setCount(5) فيغير الحالة (state) ويعيد إعادة تقديم (re-render) المكون. وتلك الإعادة هي ما يحدد ما يعرض على الشاشة.