ההוק useState ב-React: דוגמאות וטעויות נפוצות

useState הוא ההוק שמאפשר לקומפוננטה לזכור משהו בין רינדורים: ספירה, הטקסט בשדה קלט, האם תפריט פתוח. בכל פעם שקוראים ל-setter שלו, 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 מתאימה כל קריאה לערך השמור שלה לפי סדר הקריאות, ולכן הסדר הזה חייב להיות זהה בכל רינדור (ראו כללי ההוקים).

כמה חלקי state

קומפוננטה יכולה לקרוא ל-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>
    );
}

state הוא תמונת מצב (snapshot)

ה-setter לא משנה את המשתנה שבידיכם. הוא אומר ל-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>;
}

פתחו את הקונסול מתחת לתצוגה המקדימה ולחצו פעם אחת. ה-handler רושם 0, הערך הישן, ואז הקומפוננטה רושמת רינדור חדש עם 1. שום דבר לא שגוי: count הוא קבוע לאורך כל הרינדור, והרינדור הבא מקבל אחד חדש.

פונקציות updater

בגלל תמונת המצב, קריאה ל-setter שלוש פעמים עם 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>
    );
}

השתמשו בצורת ה-updater בכל פעם שהערך הבא תלוי בקודם והעדכון אולי לא רץ ישירות מהרינדור העדכני: כמה קביעות ב-handler אחד, callback של setInterval, או אפקט.

אובייקטים ומערכים ב-state

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 מסיר אחד, ושניהם מחזירים מערך חדש. הדף על עדכון מערכים ואובייקטים מכסה אובייקטים מקוננים, עריכת פריט אחד ברשימה והכנסה באמצע.

state התחלתי עצל (lazy)

הארגומנט של 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());

איפוס state עם key

state שייך למיקום של קומפוננטה בעץ. אם מרנדרים key אחר באותו מקום, React מתייחסת לזה כקומפוננטה חדשה וה-state שלה מתחיל מחדש. זו הדרך הנקייה ביותר לאפס טופס כשהדבר שהוא עורך משתנה.

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 באותו מקום.

טעויות נפוצות

הדפסת state מיד אחרי שקבעתם אותו. רואים את הערך הישן, כמו שמוצג למעלה. הדפיסו בגוף הקומפוננטה, או חשבו קודם את הערך הבא לתוך משתנה והשתמשו בו.

שינוי ישיר (mutation) של state. user.age++; setUser(user) מעביר את אותו אובייקט, ולכן שום דבר לא מתרנדר. העתיקו קודם.

קריאה ל-setter בזמן הרינדור. <button onClick={setCount(count + 1)}> קורא ל-setCount בזמן הרינדור, מה שמרנדר שוב, מה שקורא לו שוב. React עוצרת את הלולאה הזו עם "Too many re-renders". העבירו פונקציה: onClick={() => setCount(count + 1)}.

שמירת ערכים שאפשר לחשב. אם fullName הוא תמיד first + ' ' + last, חשבו אותו בזמן הרינדור במקום להחזיק חלק state שלישי שעלול לצאת מסנכרון.