Správa stavu

Nejlevnější stav je ten, který neexistuje: hodně toho, co vypadá jako stav, je parametr v URL nebo hodnota ze serveru, kterou stačí načíst. Pak držte stav co nejníž. Text v hledání, otevřený nebo zavřený akordeon, zvýrazněný řádek — to patří do komponenty a nikam jinam.

Praktické pravidlo pro e-shop: aktivní stránka výpisu patří do URL (`?strana=2`), košík do globálního store a text hledání do komponenty. Když to prohodíte, dostanete odkazy, které otevřou špatnou stránku, a tlačítko zpět, které lidi překvapí.

Globální stav je pohodlný: nemusíte protahovat props, a tak roste. Za rok v store leží košík, měna, feature flag z roku 2023, notifikace, cache posledních padesáti produktů a filtr, který kdysi potřebovala jedna stránka. Nikdo neumí říct, co ještě co používá, protože všechno dosáhne na všechno.

Nejčastějším viníkem jsou data ze serveru. Produkty, objednávky a profil uživatele není potřeba kopírovat do globálního store — vrstva na načítání s cache (React Query, SWR nebo cache fetchů v Next.js) už řeší načítání, opakování i zneplatnění. Globální store si nechte na skutečně celoaplikační klientské věci: téma, jazyk, otevřený košík — a funkce, které do něj zapisují, držte v jednom modulu.

Každý modul, který čte sdílený store, může rozbít změna na jiném místě. To není důvod se globálnímu stavu vyhýbat — košík opravdu musí být vidět z hlavičky, z tlačítka i z pokladny — ale je to důvod držet store malý a jeho API nudné: pár pojmenovaných akcí, explicitní typy a žádná business logika schovaná v komponentách, které volají `set` přímo.

V malé aplikaci stačí `useState`, kousek kontextu a URL. Knihovna na stav se vyplatí, když stav přežije přechod mezi stránkami, zapisuje do něj mnoho komponent nebo musí fungovat offline ve více záložkách.