الحالة (State) هي أي بيانات يمكن أن تتغير بمرور الوقت والتي تعتمد عليها واجهة المستخدم للعرض. عندما تتغير الحالة، تتحدث واجهة المستخدم لتعكس هذا التغيير. إنها "ذاكرة" التطبيق في أي لحظة معينة.
✓ A counter value, a form's input text, a toggle (on/off)
✓ Whether a modal is open, the active tab, loading/error flags
✓ The logged-in user, items in a cart, fetched API data
✓ The current theme (dark/light), selected filters
function Counter() {
const [count, setCount] = useState(0); // `count` is state
return (
<button onClick={() => setCount(count + 1)}>
Clicked {count} times {/* the UI is a function of state */}
</button>
);
}
الفكرة الأساسية للأطر العصرية: UI = f(state). لا تقوم بتحديث DOM يدويًا؛ بل تغير الحالة، والإطار يعيد عرض واجهة المستخدم لتطابقها. اضغط على الزر → يتغير count → يتم تحديث الرقم المعروض تلقائيًا.
State: changes over time, drives re-renders (count, user, isOpen)
Constants: never change (PI, config URLs) — not state
Derived: computed FROM state (fullName from firstName + lastName) — don't store separately
ليست كل متغير حالة — فقط البيانات التي تتغير و تؤثر على ما يتم عرضه. القيم التي يمكنك حسابها من حالة موجودة لا يجب تخزينها كحالة منفصلة (قد تتسبب في عدم تزامنها).
Local/UI state → belongs to one component (input text, isOpen)
Global state → shared app-wide (user, theme, cart)
Server state → data fetched from an API (cached remote data)
URL state → in the address bar (filters, page number)
فهم الحالة باعتبارها "بيانات تتغير وتدفع واجهة المستخدم" هو أساس جميع تطوير واجهات المستخدم.
النموذج الذهني UI = f(state) يشرح كيفية عمل React/Vue/Angular — تدير الحالة، والعرض يتبع.
التعرف على ما هو وليس حالة (وعدم تكرار القيم القابلة للاشتقاق) هي الخطوة الأولى نحو إدارتها بشكل جيد؛ كل شيء في إدارة الحالة يبني على هذا المفهوم.