useState: co to je, hook stavu a syntax v Reactu

Co je useState v Reactu

useState — je základní React hook, přidaný ve verzi 16.8, který dává funkcionálním komponentám možnost ukládat a měnit lokální stav. Před příchodem hooks bylo možné stav používat pouze v třídových komponentách přes this.state a this.setState, což činilo funkcionální komponenty výhradně prezentačními. useState toto omezení odstranil a umožnil psát celou aplikaci na funkcionálních komponentách.

Hook přijímá jeden argument — počáteční hodnotu stavu — a vrací pole o dvou prvcích. První prvek je aktuální hodnota stavu, druhý je funkce pro jeho aktualizaci. React garantuje, že setter funkce je stabilní a nemění se mezi vykresleními, což umožňuje bezpečné předávání do podřízených komponent a použití v uzávěrech.

Podle React DevTools Usage Survey (2024) je useState používán v 96% React aplikací, což z něj dělá nejrozšířenější hook v ekosystému. Dokonce i v aplikacích používajících globální stav přes Redux nebo Zustand zůstává lokální stav přes useState hlavním mechanismem správy UI stavu — otevřené modály, hodnoty vstupních polí, aktivní karty.

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

Jak funguje useState

Vnitřní mechanismus useState je založen na systému fiber uzlů Reactu. Každá komponenta v Reactu je reprezentována fiber uzlem, který ukládá související seznam hooks ve formě propojeného seznamu. Když komponenta zavolá useState, React vytvoří nový uzel v tomto seznamu a uloží do něj aktuální hodnotu stavu a odkaz na frontu aktualizací.

Při volání setter funkce React neaktualizuje stav okamžitě. Místo toho umístí aktualizaci do fronty (pending state queue), naplánuje překreslení komponenty a teprve během dalšího vykreslení vypočítá nový stav na základě starého a aplikovaných aktualizací. To zajišťuje dávkové zpracování — pokud v jednom handleru události zavoláte setter třikrát, React je seskupí do jednoho překreslení.

Podle React Team — React 18 Working Group (2024) bylo automatické dávkové zpracování rozšířeno v React 18: nyní jsou aktualizace stavu seskupovány nejen v handlerech událostí, ale také v setTimeout, Promise callbackách a nativních handlerech. To přineslo zvýšení výkonu až o 30% ve scénářích s vícenásobnými aktualizacemi stavu.

Funkcionální aktualizace stavu

Když nový stav závisí na předchozím, použijte funkcionální formu setteru: setCount(prev => prev + 1). React předá funkci aktuální hodnotu stavu v okamžiku aplikace aktualizace, což zaručuje správnost i při dávkových aktualizacích. Bez funkcionální formy může setCount(count + 1) použít zastaralou hodnotu, pokud je voláno několikrát za sebou.

// Líná inicializace — spouští se pouze jednou
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)

Syntaxe useState: deklarace a aktualizace

Základní syntaxe useState je velmi stručná: const [state, setState] = useState(initialValue). Počáteční hodnota se používá pouze při prvním vykreslení; při následujících vykresleních ji React ignoruje a vrací aktuální uloženou hodnotu. Pokud počáteční výpočet vyžaduje nákladné operace, předejte inicializační funkci: useState(() => computeExpensiveInitial()).

Líná inicializace (lazy initial state) je obzvláště důležitá, když počáteční hodnota pochází z localStorage, složité transformace dat nebo parsování URL parametrů. React volá inicializační funkci pouze jednou — při připojení komponenty, což šetří zdroje při následujících vykresleních. Bez líné inicializace bude nákladný výraz vyhodnocen při každém vykreslení, i když je jeho výsledek ignorován.

// Stav objektu — vytvořte novou referenci
const [user, setUser] = useState(() => {
    const saved = localStorage.getItem('user');
    return saved ? JSON.parse(saved) : null;
});

useState s různými typy dat

useState funguje stejně dobře s primitivy (čísla, řetězce, booleany) a referenčními typy (pole, objekty). Existuje však důležitý rozdíl: u primitiv React detekuje změnu podle hodnoty, u objektů a polí — podle reference. Mutace existujícího objektu bez vytvoření nového nezpůsobí překreslení, protože reference zůstala stejná.

Při práci s objekty a poli vždy vytvářejte novou kopii se změněnými daty. Pro objekty použijte spread syntaxi: setUser(prev => ({...prev, name: newName})). Pro pole — metody vracející nové pole: filter, map, concat, nebo spread syntaxi pro přidávání prvků. Mutační metody jako push, pop, splice přímo nebudou fungovat — React je ignoruje, protože reference na pole se nezměnila.

// ✅ Správně: hooks na nejvyšší úrovni
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]);

Pravidla používání hooks s useState

Stejně jako všechny React hooks, useState podléhá dvěma pravidlům. Za prvé: volejte hooks pouze na nejvyšší úrovni komponenty — nelze je umístit do podmínek, cyklů nebo vnořených funkcí. To zaručuje, že hooks jsou volány ve stejném pořadí při každém vykreslení, což je kritické pro vnitřní propojený seznam Reactu.

Druhé pravidlo: volejte hooks pouze z funkcionálních React komponent nebo vlastních hooks. Nevolejte useState z běžných funkcí, callbacků nebo třídových komponent. Porušení těchto pravidel vede k chybě Invalid hook call, kterou React zachycuje ve fázi provádění.

• Ne v podmínkách — if (flag) { useState(0) } narušuje pořadí volání hooks.
• Ne v cyklech — for (...) { useState(0) } činí pořadí nepředvídatelným.
• Ne v callbackách — useEffect(() => { useState(0) }, []) rozbije propojený seznam.

// ❌ Problém zastaralého uzávěru
function GoodComponent() {
    const [count, setCount] = useState(0);
    const [name, setName] = useState('');
    // ✅ Opraveno funkcionální aktualizací
}

// čítač je zastaralý!
function BadComponent() {
    if (isLogged) {
        const [user, setUser] = useState(null);
    }
}

Typické chyby s useState

Nejčastější chyba — přímá mutace objektů a polí místo vytváření nových referencí. Vývojáři si zvykli na mutabilní styl z třídových komponent, kde this.state.user.name = „Nové jméno“ fungovalo (ačkoli také nebylo doporučeno). Ve funkcionálních komponentách je taková mutace jednoduše ignorována: React nevidí změnu reference a komponentu nepřekresluje.

• Mutace objektu — user.name = „Nové“ místo setUser({...user, name: „Nové“}).
• Zastaralý uzávěr — použití zastaralé hodnoty v setteru bez funkcionální formy.
• Zbytečná překreslení — volání setteru se stejnou hodnotou (React 18 pro primitiva stejně vykreslí).
• Resetování stavu — neúmyslná aktualizace key prop komponenty, která ji znovu připojí.

Problém zastaralého uzávěru (stale closure) nastává, když callback předaný do useEffect nebo handleru události „zachytí“ zastaralou hodnotu stavu z uzávěru v okamžiku vytvoření callbacku. Řešení — použijte funkcionální formu setteru nebo zahrňte potřebné hodnoty do pole závislostí useEffect. Podle React Documentation — Hooks FAQ (2025) jsou zastaralé uzávěry druhou nejčastější příčinou chyb v hooks po nesprávném poli závislostí.

// ❌ 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);
}, []);