Hooki w React: wszystkie hooki na żywych przykładach

Hooki w React to funkcje, których nazwy zaczynają się od use i które pozwalają komponentowi funkcyjnemu korzystać z funkcji Reacta: useState, żeby zapamiętać wartość, useEffect, żeby uruchomić kod po renderowaniu, useRef, żeby trzymać węzeł DOM, useContext, żeby odczytać wspólne dane. Wywołujesz je na początku komponentu, a React zachowuje ich wartości między renderowaniami.

import { useState, useEffect, useRef, useMemo } from 'react';

const FRUITS = ['apple', 'banana', 'cherry', 'grape', 'mango', 'pear'];

export default function App() {
    const [query, setQuery] = useState('');
    const inputRef = useRef(null);

    const matches = useMemo(
        () => FRUITS.filter((f) => f.includes(query.toLowerCase())),
        [query]
    );

    useEffect(() => {
        console.log(`effect: ${matches.length} matches for "${query}"`);
    }, [query, matches.length]);

    return (
        <div>
            <input
                ref={inputRef}
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder="Filter fruit"
            />
            <button onClick={() => inputRef.current.focus()}>Focus</button>
            <ul>
                {matches.map((f) => (
                    <li key={f}>{f}</li>
                ))}
            </ul>
        </div>
    );
}

Współpracują tu cztery hooki. useState przechowuje tekst, useRef wskazuje na pole, żeby przycisk mógł ustawić na nim fokus, useMemo trzyma przefiltrowaną listę, dopóki nie zmieni się zapytanie, a useEffect wypisuje log po każdym renderowaniu, w którym zapytanie się zmieniło. Wpisz an i obserwuj konsolę: jedna linia na każde naciśnięcie klawisza, po aktualizacji listy.

Dlaczego istnieją hooki

Przed React 16.8 komponent, który potrzebował stanu albo kodu cyklu życia, musiał być klasą. Logika jednej funkcji była rozdzielona między componentDidMount, componentDidUpdate i componentWillUnmount, a współdzielenie jej między komponentami oznaczało mixiny (które nigdy nie działały ze składnią klas), komponenty wyższego rzędu albo render propsy, a każde z tych rozwiązań owijało drzewo w dodatkowe warstwy.

// The class way: one feature, three methods
class Clock extends React.Component {
    state = { now: new Date() };
    componentDidMount() {
        this.id = setInterval(() => this.setState({ now: new Date() }), 1000);
    }
    componentWillUnmount() {
        clearInterval(this.id);
    }
    render() {
        return <p>{this.state.now.toLocaleTimeString()}</p>;
    }
}

Z hookami ta sama funkcja żyje w jednym miejscu: efekt uruchamia timer, a jego funkcja czyszcząca go zatrzymuje.

import { useState, useEffect } from 'react';

function Clock() {
    const [now, setNow] = useState(new Date());

    useEffect(() => {
        console.log('timer started');
        const id = setInterval(() => setNow(new Date()), 1000);
        return () => {
            clearInterval(id);
            console.log('timer stopped');
        };
    }, []);

    return <p>{now.toLocaleTimeString()}</p>;
}

export default function App() {
    const [show, setShow] = useState(true);
    return (
        <div>
            <button onClick={() => setShow(!show)}>{show ? 'Hide' : 'Show'} clock</button>
            {show && <Clock />}
        </div>
    );
}

Ukryj zegar, a konsola wypisze timer stopped: React uruchomił funkcję czyszczącą, gdy Clock zniknął z ekranu. Pokaż go ponownie, a wystartuje świeży timer. Komponenty klasowe nadal działają w React 19, ale nowy kod używa hooków.

Wszystkie wbudowane hooki

React 19.2 grupuje swoje hooki według tego, co dają komponentowi. Pierwszych dwóch grup będziesz używać codziennie, a reszty wtedy, gdy wymaga tego konkretny problem.

use, useActionState, useOptimistic i useFormStatus pojawiły się w React 19, a useEffectEvent stał się stabilny w 19.2. Każdy inny hook z listy działa też w React 18.

Stan renderuje, refy nie

Nie każdy hook wywołuje renderowanie. useState i useReducer tak: zmień ich wartość, a React narysuje komponent ponownie. useRef daje ci obiekt, którego pole current możesz swobodnie zmieniać, a React nigdy przez to nie renderuje ponownie. Dlatego to właściwe miejsce na ID timera, poprzednią wartość albo licznik, którego ekran nie pokazuje.

import { useState, useRef, useReducer, useEffect } from 'react';

function reducer(state, action) {
    if (action === 'add') return { items: state.items + 1 };
    if (action === 'clear') return { items: 0 };
    return state;
}

export default function App() {
    const [cart, dispatch] = useReducer(reducer, { items: 0 });
    const [note, setNote] = useState('');
    const commits = useRef(0);

    useEffect(() => {
        commits.current += 1;
        console.log(`render #${commits.current} reached the screen`);
    });

    return (
        <div>
            <p>Items in cart: {cart.items}</p>
            <button onClick={() => dispatch('add')}>Add item</button>
            <button onClick={() => dispatch('clear')}>Clear</button>
            <p>
                <input value={note} onChange={(e) => setNote(e.target.value)} placeholder="Note" />
            </p>
        </div>
    );
}

useReducer trzyma koszyk, a useState notatkę; oba powodują renderowanie, gdy się zmieniają, a efekt wypisuje jedną linię na renderowanie. Efekt zmienia też commits.current, a jednak ta zmiana nigdy sama nie powoduje renderowania, więc log się nie zapętla. Licznik jest aktualizowany w efekcie, a nie w ciele komponentu, bo ciało nie powinno niczego zmieniać podczas renderowania.

Zasady hooków

Każdy hook przestrzega dwóch zasad:

1. Wywołuj hooki na najwyższym poziomie komponentu, nigdy w warunku, pętli ani zagnieżdżonej funkcji.
2. Wywołuj hooki tylko z komponentów funkcyjnych albo z własnych hooków.

React nie rozpoznaje hooków po nazwie. Rozpoznaje je po kolejności wywołań i oczekuje, że ta kolejność będzie taka sama przy każdym renderowaniu. Hook w if przesunąłby każdy hook po nim. Strona o zasadach hooków pokazuje, co się psuje i jak to naprawić. use to jedyny wyjątek: można go wywołać w warunku.

Twój pierwszy własny hook

Gdy dwa komponenty potrzebują tej samej logiki ze stanem, przenieś ją do funkcji, której nazwa zaczyna się od use. Ta funkcja może wywoływać dowolny inny hook. Każdy komponent, który ją wywołuje, dostaje własny stan.

import { useState } from 'react';

function useCounter(start, step) {
    const [count, setCount] = useState(start);
    const increment = () => setCount((c) => c + step);
    const reset = () => setCount(start);
    return { count, increment, reset };
}

function Counter({ label, start, step }) {
    const { count, increment, reset } = useCounter(start, step);
    return (
        <p>
            {label}: {count}{' '}
            <button onClick={increment}>+{step}</button>{' '}
            <button onClick={reset}>Reset</button>
        </p>
    );
}

export default function App() {
    return (
        <div>
            <Counter label="Apples" start={0} step={1} />
            <Counter label="Points" start={100} step={10} />
        </div>
    );
}

Oba liczniki uruchamiają ten sam hook, ale kliknięcie jednego zostawia drugi w spokoju: własny hook współdzieli logikę, a nie stan. Dodaj do useCounter funkcję decrement i przycisk, który ją wywołuje, a oba liczniki dostaną ją naraz. Więcej wzorców (useToggle, useDebounce, useLocalStorage) znajdziesz na stronie o własnych hookach.

Po który hook sięgnąć

• Ekran ma się zmienić, gdy zmienia się wartość: useState albo useReducer, gdy wiele zdarzeń aktualizuje ten sam stan.
• Musisz porozumieć się z czymś spoza Reacta (timer, subskrypcja, żądanie): useEffect.
• Potrzebujesz węzła DOM albo wartości, której ekran nie pokazuje: useRef.
• Wiele komponentów głęboko w drzewie potrzebuje tej samej wartości: useContext.
• Renderowanie jest wolne przez jedno obliczenie albo dlatego, że zmemoizowane dziecko renderuje się ponownie: useMemo i useCallback. React Compiler może dodać tę memoizację za ciebie, ale pisanie jej ręcznie nadal działa i nadal jest powszechne.
• Pisanie wydaje się opóźnione, bo aktualizacja za nim jest ciężka: useTransition albo useDeferredValue.