useState: ما هو، خطاف الحالة وتركيب الجملة في React

ما هو useState في React

useState هو خطاف أساسي في React، أضيف في الإصدار 16.8، يمنح المكونات الوظيفية القدرة على تخزين وتغيير الحالة المحلية. قبل تقديم الخطافات، كان يمكن استخدام الحالة فقط في المكونات الفئوية عبر this.state و this.setState، مما جعل المكونات الوظيفية عرضية بحتة. أزال useState هذا القيد، مما سمح بكتابة تطبيقات كاملة باستخدام مكونات وظيفية.

يأخذ الخطاف وسيطاً واحداً « القيمة الأولية للحالة « ويعيد مصفوفة من عنصرين. العنصر الأول هو القيمة الحالية للحالة، والثاني هو دالة لتحديثها. يضمن React أن دالة الضبط ثابتة ولا تتغير بين عمليات إعادة العرض، مما يسمح بتمريرها بأمان إلى المكونات الفرعية واستخدامها في الإغلاقات.

وفقاً لاستطلاع استخدام React DevTools (2024)، يستخدم useState في 96% من تطبيقات React، مما يجعله الخطاف الأكثر شيوعاً في النظام البيئي. حتى في التطبيقات التي تستخدم الحالة العامة عبر Redux أو Zustand، تبقى الحالة المحلية عبر useState الآلية الأساسية لإدارة حالة واجهة المستخدم « النوافذ المنبثقة المفتوحة، قيم حقول الإدخال، علامات التبويب النشطة.

import { useState } from 'react';

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

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>
                Increment
            </button>
        </div>
    );
}

كيف يعمل useState

الآلية الداخلية لـ useState تعتمد على نظام عقد الألياف (fiber nodes) في React. كل مكون في React يمثله عقدة ألياف تخزن قائمة مرتبطة من الخطافات المرتبطة به. عندما يستدعي مكون useState، ينشئ React عقدة جديدة في هذه القائمة ويخزن فيها القيمة الحالية للحالة ومرجعاً لطابور التحديثات.

عند استدعاء دالة الضبط، لا يحدث React الحالة فوراً. بدلاً من ذلك، يضع التحديث في طابور الحالة المعلقة، ويجدول إعادة عرض المكون، وفقط أثناء إعادة العرض التالية يحسب الحالة الجديدة بناءً على القديمة والتحديثات المطبقة. يضمن هذا التجميع في دفعات « إذا استدعيت دالة الضبط ثلاث مرات في معالج حدث واحد، يجمعها React في إعادة عرض واحدة.

وفقاً لفريق عمل React 18 « مجموعة عمل React (2024)، تم توسيع التجميع التلقائي في React 18: أصبحت تحديثات الحالة تُجمع الآن ليس فقط في معالجات الأحداث، ولكن أيضاً في setTimeout، استدعاءات Promise ومعالجات الأحداث الأصلية. أعطى هذا تحسيناً في الأداء يصل إلى 30% في السيناريوهات ذات التحديثات المتعددة للحالة.

التحديث الوظيفي للحالة

عندما تعتمد الحالة الجديدة على الحالة السابقة، استخدم الشكل الوظيفي لـ دالة الضبط: setCount(prev => prev + 1). يمرر React قيمة الحالة الفعلية وقت التحديث إلى الدالة، مما يضمن الصحة حتى مع التحديثات المجمعة. بدون الشكل الوظيفي، قد يستخدم setCount(count + 1) قيمة قديمة إذا استدعي عدة مرات متتالية.

// التهيئة البطيئة « تعمل مرة واحدة فقط
setCount(prev => prev + 1);
setCount(prev => prev + 1);
setCount(prev => prev + 1);
// Result: count increased by 3

// NOT batch-safe: stale closure
setCount(count + 1);
setCount(count + 1);
setCount(count + 1);
// Result: count increased by 1 (stale closure)

تركيب useState: التعريف والتحديث

التركيب الأساسي لـ useState موجز للغاية: const [state, setState] = useState(initialValue). تُستخدم القيمة الأولية فقط أثناء أول إعادة عرض؛ في عمليات إعادة العرض اللاحقة، يتجاهلها React ويعيد القيمة الحالية المخزنة. إذا كان الحساب الأولي يتطلب عمليات مكلفة، مرر دالة تهيئة: useState(() => computeExpensiveInitial()).

التهيئة البطيئة (lazy initialization) مهمة بشكل خاص عندما تأتي القيمة الأولية من localStorage، تحويل بيانات معقد، أو تحليل معلمات URL. يستدعي React دالة التهيئة مرة واحدة فقط « عند تركيب المكون، مما يوفر الموارد في عمليات إعادة العرض اللاحقة. بدون التهيئة البطيئة، سيتم تقييم التعبير المكلف في كل إعادة عرض، حتى إذا تم تجاهل نتائجه.

// حالة الكائن « إنشاء مرجع جديد
const [user, setUser] = useState(() => {
    const saved = localStorage.getItem('user');
    return saved ? JSON.parse(saved) : null;
});

useState مع أنواع مختلفة من البيانات

useState يعمل بشكل جيد مع كل من الأنواع البدائية (أرقام، سلاسل، قيم منطقية) وأنواع المرجع (مصفوفات، كائنات). ومع ذلك، هناك فرق مهم: بالنسبة للأنواع البدائية، يكتشف React التغييرات حسب القيمة؛ بالنسبة للكائنات والمصفوفات، حسب المرجع. تغيير كائن موجود دون إنشاء كائن جديد لن يؤدي إلى إعادة عرض لأن المرجع بقي كما هو.

عند العمل مع الكائنات والمصفوفات، أنشئ دائماً نسخة جديدة بالبيانات المعدلة. للكائنات، استخدم صيغة الانتشار: setUser(prev => ({...prev, name: newName})). للمصفوفات، استخدم الطرق التي تعيد مصفوفة جديدة: filter، map، concat، أو صيغة الانتشار لإضافة عناصر. طرق التغيير مثل push، pop، splice لن تعمل « سيتجاهلها React لأن مرجع المصفوفة لم يتغير.

// ✅ صحيح: الخطافات في المستوى الأعلى
const [form, setForm] = useState({ name: '', email: '' });
const updateField = (field, value) =>
    setForm(prev => ({ ...prev, [field]: value }));

// ...
const [items, setItems] = useState([]);
const addItem = item =>
    setItems(prev => [item, ...prev]);

قواعد استخدام الخطافات مع useState

مثل جميع خطافات React، يتبع useState قاعدتين. الأولى: استدعِ الخطافات فقط في المستوى الأعلى من مكونك « لا تضعها داخل الشروط، الحلقات أو الدوال المتداخلة. يضمن هذا أن يتم استدعاء الخطافات بنفس الترتيب في كل إعادة عرض، وهو أمر بالغ الأهمية للقائمة المرتبطة الداخلية لـ React.

القاعدة الثانية: استدعِ الخطافات فقط من المكونات الوظيفية لـ React أو الخطافات المخصصة. لا تستدعِ useState من الدوال العادية، الاستدعاءات الخلفية أو المكونات الفئوية. يؤدي انتهاك هذه القواعد إلى خطأ استدعاء خطاف غير صالح، الذي يكتشفه React في وقت التشغيل.

• ليس في الشروط « if (flag) { useState(0) } ينتهك ترتيب استدعاءات الخطافات.
• ليس في الحلقات « for (...) { useState(0) } يجعل الترتيب غير قابل للتنبؤ.
• ليس في الاستدعاءات الخلفية « useEffect(() => { useState(0) }, []) يكسر القائمة المرتبطة.

// ❌ مشكلة الإغلاق القديم
function GoodComponent() {
    const [count, setCount] = useState(0);
    const [name, setName] = useState('');
    // ✅ تم الإصلاح باستخدام التحديث الوظيفي
}

// count قديم!
function BadComponent() {
    if (isLogged) {
        const [user, setUser] = useState(null);
    }
}

الأخطاء الشائعة مع useState

الخطأ الأكثر شيوعاً هو التغيير المباشر للكائنات والمصفوفات بدلاً من إنشاء مراجع جديدة. المطورون معتادون على الأسلوب القابل للتغيير من المكونات الفئوية، حيث كان this.state.user.name = ‘اسم جديد’ يعمل (على الرغم من أنه لم يكن موصى به أيضاً). في المكونات الوظيفية، يتم تجاهل هذا التغيير ببساطة: لا يرى React تغييراً في المرجع ولا يعيد عرض المكون.

• تغيير الكائن « user.name = ‘جديد’ بدلاً من setUser({...user, name: ‘جديد’}).
• إغلاق قديم « استخدام قيمة قديمة في دالة الضبط دون الشكل الوظيفي.
• إعادة عرض زائدة « استدعاء دالة الضبط بنفس القيمة (لا يزال React 18 يقوم بإعادة عرض للأنواع البدائية).
• إعادة تعيين الحالة « تحديث غير مقصود لخاصية المفتاح (key) لمكون، مما يؤدي إلى إعادة تركيبه.

تحدث مشكلة الإغلاق القديم عندما يلتقط استدعاء خلفي مُمرر إلى useEffect أو معالج حدث قيمة حالة قديمة من الإغلاق في وقت إنشاء الاستدعاء الخلفي. الحل هو استخدام الشكل الوظيفي لدالة الضبط أو تضمين القيم المطلوبة في مصفوفة تبعيات useEffect. وفقاً لوثائق React « الأسئلة الشائعة عن الخطافات (2025)، الإغلاقات القديمة هي ثاني أكثر سبب شيوعاً للأخطاء في الخطافات بعد مصفوفات التبعيات غير الصحيحة.

// ❌ Stale closure problem
useEffect(() => {
    const timer = setInterval(() => {
        setCount(count + 1); // count is stale!
    }, 1000);
    return () => clearInterval(timer);
}, []);

// ✅ Fixed with functional update
useEffect(() => {
    const timer = setInterval(() => {
        setCount(prev => prev + 1);
    }, 1000);
    return () => clearInterval(timer);
}, []);