الخطاف useState في React: أمثلة وأخطاء شائعة

useState هو الخطاف الذي يتيح للمكوّن أن يتذكر شيئًا بين مرات العرض: عددًا، أو النص في حقل إدخال، أو ما إذا كانت قائمة مفتوحة. في كل مرة تستدعي دالة الضبط الخاصة به، تعرض React المكوّن من جديد بالقيمة الجديدة.

import { useState } from 'react';

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

    return (
        <button onClick={() => setCount(count + 1)}>
            Clicked {count} times
        </button>
    );
}

انقر الزر، ثم غيّر useState(0) إلى useState(10) في المحرر. تُعاد بناء المعاينة ويبدأ العدد من 10.

الصيغة

const [value, setValue] = useState(initialValue);

• تُستخدم initialValue في العرض الأول فقط. وفي كل عرض لاحق تتجاهلها React وتعيد القيمة التي خزّنتها.
• value هي القيمة الحالية لهذا العرض.
• تستبدل setValue القيمة وتجدول عرضًا جديدًا.

الأسماء من اختيارك. يُرجع useState مصفوفة من عنصرين والأقواس المربعة تفككها، فيكون [isOpen, setIsOpen] و[email, setEmail] النمط نفسه.

استدعِ useState في المستوى الأعلى من مكوّنك، ولا تستدعه أبدًا داخل حلقة أو شرط أو دالة متداخلة. تطابق React كل استدعاء مع قيمته المخزنة بحسب ترتيب الاستدعاءات، لذا يجب أن يكون هذا الترتيب نفسه في كل عرض (راجع قواعد الخطافات).

عدة قطع من الحالة

يمكن للمكوّن أن يستدعي useState بقدر ما يحتاج. كل استدعاء قيمة مستقلة بذاتها.

import { useState } from 'react';

export default function App() {
    const [name, setName] = useState('');
    const [likesReact, setLikesReact] = useState(true);

    return (
        <div>
            <input
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="Your name"
            />
            <label style={{ display: 'block', marginTop: 8 }}>
                <input
                    type="checkbox"
                    checked={likesReact}
                    onChange={(e) => setLikesReact(e.target.checked)}
                />
                I like React
            </label>
            <p>
                {name || 'Someone'} {likesReact ? 'likes' : 'does not like'} React.
            </p>
        </div>
    );
}

الحالة لقطة

دالة الضبط لا تغيّر المتغير الذي بين يديك. بل تخبر React بما يجب أن تكون عليه القيمة في العرض التالي. وحتى يحدث ذلك العرض، يظل العرض الحالي يرى القيمة القديمة.

import { useState } from 'react';

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

    function handleClick() {
        setCount(count + 1);
        console.log('count right after setCount:', count);
    }

    console.log('render with count =', count);

    return <button onClick={handleClick}>Add one ({count})</button>;
}

افتح وحدة التحكم أسفل المعاينة وانقر مرة واحدة. يسجّل المعالج 0، القيمة القديمة، ثم يسجّل المكوّن عرضًا جديدًا بالقيمة 1. لا شيء خاطئ: count ثابت طوال العرض، والعرض التالي يحصل على ثابت جديد.

دوال التحديث

بسبب اللقطة، فإن استدعاء دالة الضبط ثلاث مرات بـ count + 1 يضيف واحدًا لا ثلاثة: كل استدعاء يحسب 0 + 1. مرّر دالة بدلًا من ذلك فتمرر React لكل استدعاء نتيجة الاستدعاء السابق.

import { useState } from 'react';

export default function App() {
    const [a, setA] = useState(0);
    const [b, setB] = useState(0);

    function addThreeWrong() {
        setA(a + 1);
        setA(a + 1);
        setA(a + 1);
    }

    function addThreeRight() {
        setB((n) => n + 1);
        setB((n) => n + 1);
        setB((n) => n + 1);
    }

    return (
        <div>
            <p>
                <button onClick={addThreeWrong}>a + 1 three times</button> a = {a}
            </p>
            <p>
                <button onClick={addThreeRight}>n =&gt; n + 1 three times</button> b = {b}
            </p>
        </div>
    );
}

استخدم صيغة دالة التحديث كلما اعتمدت القيمة التالية على السابقة وكان التحديث قد لا يعمل مباشرة من أحدث عرض: عدة عمليات ضبط في معالج واحد، أو دالة استدعاء لـ setInterval، أو تأثير.

الكائنات والمصفوفات في الحالة

تقرر React ما إذا كانت ستعيد العرض بمقارنة القيمة القديمة بالجديدة عبر Object.is. إذا غيّرت كائنًا في مكانه ومررت الكائن نفسه من جديد، تقول المقارنة إن شيئًا لم يتغير وتبقى الشاشة كما كانت. مرّر دائمًا كائنًا أو مصفوفة جديدة.

import { useState } from 'react';

export default function App() {
    const [user, setUser] = useState({ name: 'Ada', age: 36 });
    const [tags, setTags] = useState(['math']);

    return (
        <div>
            <p>
                {user.name}, {user.age}
            </p>
            <button onClick={() => setUser({ ...user, age: user.age + 1 })}>
                Birthday
            </button>

            <p>Tags: {tags.join(', ')}</p>
            <button onClick={() => setTags([...tags, 'code'])}>Add tag</button>
            <button onClick={() => setTags(tags.filter((t) => t !== 'math'))}>
                Remove math
            </button>
        </div>
    );
}

ينسخ { ...user, age: user.age + 1 } كل حقل ويتجاوز واحدًا. ويضيف [...tags, 'code'] عنصرًا، ويحذف filter عنصرًا، وكلاهما يُرجع مصفوفة جديدة. تتناول صفحة تحديث المصفوفات والكائنات الكائنات المتداخلة وتعديل عنصر واحد في قائمة والإدراج في الوسط.

الحالة الابتدائية الكسولة

يُقيَّم وسيط useState في كل عرض، رغم أن React لا تستخدمه إلا في المرة الأولى. عندما يكون حسابه مكلفًا (قراءة localStorage، أو تحليل نص كبير)، مرّر دالة. تستدعيها React مرة واحدة، في العرض الأول.

// Runs readSavedNotes() on every render, then throws the result away
const [notes, setNotes] = useState(readSavedNotes());

// Runs it once
const [notes, setNotes] = useState(readSavedNotes);
const [notes, setNotes] = useState(() => readSavedNotes());

إعادة ضبط الحالة بمفتاح

تخص الحالة موضع المكوّن في الشجرة. إذا عرضت key مختلفًا في الموضع نفسه، تعامله React كمكوّن جديد وتبدأ حالته من جديد. هذه أنظف طريقة لإعادة ضبط نموذج عندما يتغير الشيء الذي يعدّله.

import { useState } from 'react';

function Draft({ to }) {
    const [text, setText] = useState('');
    return (
        <textarea
            value={text}
            onChange={(e) => setText(e.target.value)}
            placeholder={`Message to ${to}`}
            rows={3}
        />
    );
}

export default function App() {
    const [to, setTo] = useState('Ada');
    return (
        <div>
            <select value={to} onChange={(e) => setTo(e.target.value)}>
                <option>Ada</option>
                <option>Linus</option>
            </select>
            <div style={{ marginTop: 8 }}>
                <Draft key={to} to={to} />
            </div>
        </div>
    );
}

اكتب رسالة، ثم بدّل المستلم: تُمحى المسودة. احذف key={to} وجرّب مرة أخرى، فيبقى النص، لأن React ترى الآن Draft نفسه في الموضع نفسه.

أخطاء شائعة

تسجيل الحالة مباشرة بعد ضبطها. ترى القيمة القديمة، كما هو موضح أعلاه. سجّل في جسم المكوّن، أو احسب القيمة التالية في متغير أولًا واستخدمه.

تعديل الحالة مباشرة. يمرر user.age++; setUser(user) الكائن نفسه، فلا يُعرض شيء. انسخ أولًا.

استدعاء دالة الضبط أثناء العرض. يستدعي <button onClick={setCount(count + 1)}> الدالة setCount أثناء العرض، فيعيد العرض، فيستدعيها من جديد. توقف React هذه الحلقة برسالة "Too many re-renders". مرّر دالة: onClick={() => setCount(count + 1)}.

تخزين قيم يمكنك حسابها. إذا كانت fullName دائمًا first + ' ' + last، فاحسبها أثناء العرض بدلًا من الاحتفاظ بقطعة ثالثة من الحالة قد تفقد التزامن.