Hook useState w React: przykłady i częste błędy

useState to hook, który pozwala komponentowi zapamiętać coś między renderowaniami: licznik, tekst w polu, informację, czy menu jest otwarte. Za każdym razem, gdy wywołujesz jego setter, React renderuje komponent ponownie z nową wartością.

import { useState } from 'react';

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

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

Kliknij przycisk, a potem zmień w edytorze useState(0) na useState(10). Podgląd się przebuduje, a licznik zacznie od 10.

Składnia

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

• initialValue jest używane tylko przy pierwszym renderowaniu. Przy każdym kolejnym React je ignoruje i oddaje wartość, którą zapamiętał.
• value to bieżąca wartość dla tego renderowania.
• setValue zastępuje wartość i planuje nowe renderowanie.

Nazwy wybierasz sam. useState zwraca dwuelementową tablicę, a nawiasy kwadratowe ją rozpakowują, więc [isOpen, setIsOpen] i [email, setEmail] to ten sam wzorzec.

Wywołuj useState na najwyższym poziomie komponentu, nigdy w pętli, warunku ani zagnieżdżonej funkcji. React dopasowuje każde wywołanie do zapamiętanej wartości po kolejności wywołań, więc ta kolejność musi być taka sama przy każdym renderowaniu (zobacz zasady hooków).

Kilka kawałków stanu

Komponent może wywołać useState tyle razy, ile potrzebuje. Każde wywołanie to osobna, niezależna wartość.

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>
    );
}

Stan to migawka

Setter nie zmienia zmiennej, którą trzymasz. Mówi Reactowi, jaka ma być wartość w następnym renderowaniu. Dopóki to renderowanie nie nastąpi, bieżące wciąż widzi starą wartość.

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>;
}

Otwórz konsolę pod podglądem i kliknij raz. Handler wypisuje 0, starą wartość, a potem komponent wypisuje nowe renderowanie z 1. Wszystko jest w porządku: count jest stałą przez całe renderowanie, a następne renderowanie dostaje nową.

Funkcje aktualizujące

Z powodu migawki trzykrotne wywołanie settera z count + 1 dodaje jeden, a nie trzy: każde wywołanie liczy 0 + 1. Przekaż zamiast tego funkcję, a React poda każdemu wywołaniu wynik poprzedniego.

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>
    );
}

Używaj formy z funkcją aktualizującą zawsze, gdy następna wartość zależy od poprzedniej, a aktualizacja może nie wykonywać się bezpośrednio z najnowszego renderowania: kilka ustawień w jednym handlerze, callback setInterval albo efekt.

Obiekty i tablice w stanie

React decyduje, czy renderować ponownie, porównując starą i nową wartość przez Object.is. Jeśli zmienisz obiekt w miejscu i przekażesz z powrotem ten sam obiekt, porównanie mówi, że nic się nie zmieniło, a ekran zostaje taki, jaki był. Zawsze przekazuj nowy obiekt albo nową tablicę.

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 } kopiuje każde pole i nadpisuje jedno. [...tags, 'code'] dodaje element, a filter usuwa jeden, i oba zwracają nową tablicę. Strona o aktualizowaniu tablic i obiektów omawia zagnieżdżone obiekty, edycję jednego elementu listy i wstawianie w środek.

Leniwy stan początkowy

Argument useState jest obliczany przy każdym renderowaniu, choć React używa go tylko za pierwszym razem. Gdy jego wyliczenie jest kosztowne (odczyt localStorage, parsowanie dużego tekstu), przekaż funkcję. React wywoła ją raz, przy pierwszym renderowaniu.

// 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());

Resetowanie stanu przez key

Stan należy do pozycji komponentu w drzewie. Jeśli w tym samym miejscu wyrenderujesz inne key, React potraktuje to jako nowy komponent, a jego stan zacznie od nowa. To najczystszy sposób na zresetowanie formularza, gdy zmienia się to, co on edytuje.

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>
    );
}

Wpisz wiadomość, a potem zmień odbiorcę: szkic się wyczyści. Usuń key={to} i spróbuj ponownie, a tekst zostanie, bo React widzi teraz ten sam Draft w tym samym miejscu.

Częste błędy

Wypisywanie stanu zaraz po jego ustawieniu. Widzisz starą wartość, jak pokazano powyżej. Wypisuj w ciele komponentu albo najpierw wylicz następną wartość do zmiennej i jej użyj.

Mutowanie stanu. user.age++; setUser(user) przekazuje ten sam obiekt, więc nic się nie renderuje. Najpierw zrób kopię.

Wywoływanie settera podczas renderowania. <button onClick={setCount(count + 1)}> wywołuje setCount w trakcie renderowania, co renderuje ponownie, co znowu go wywołuje. React przerywa tę pętlę komunikatem "Too many re-renders". Przekaż funkcję: onClick={() => setCount(count + 1)}.

Przechowywanie wartości, które można wyliczyć. Jeśli fullName to zawsze first + ' ' + last, wyliczaj je podczas renderowania, zamiast trzymać trzeci kawałek stanu, który może się rozjechać.