Redux versus React Context: kdy má smysl sáhnout po store

REST dominuje ve světě jednoduchých, dobře definovaných zdrojů. Pokud máte entity jako uživatel, objednávka nebo produkt, a klient vždy potřebuje celý objekt, REST je jasná volba. HTTP metody, status kódy a cache nábytek na míru úrovni serveru fungují nativně. Typickým příkladem je veřejné API pro čtení článků nebo katalogů, kde chcete, aby se odpovědi daly snadno ukládat do mezipaměti. Nezapomeňte ale na verzování – v RESTu je změna struktury dat bez nové verze cesty receptem na rozbití klientů.

Při návrhu API stojíte před volbou, která ovlivní vývoj na měsíce dopředu. REST a GraphQL nejsou konkurenti, ale nástroje pro různé situace. REST funguje jako sada jednoúčelových koncových bodů, zatímco GraphQL umožňuje klientovi poskládat si odpověď přesně podle potřeby. Než se rozhodnete, položte si tři otázky: Kdo bude API konzumovat? Jaká je struktura dat? A jak moc se budou požadavky lišit mezi jednotlivými klienty? Odpovědi vám napoví, kterým směrem se vydat.

Než začnete s Reduxem, ověřte si, zda ho skutečně potřebujete. React Context umí předávat data napříč stromem komponent, ale má jednu zásadní nevýhodu: při každé změně hodnoty se přerenderují všechny komponenty, které kontext odebírají. Redux sice přidává boilerplate, ale díky selektorům a memoizaci se renderují jen ty části, jejichž data se změnila. Pokud máte aplikaci s častou změnou stavu, globálním sdílením dat a složitou logikou, Redux se vyplatí. Pro malou aplikaci s pár formuláři je ale overkill – tam vám postačí lokální stav nebo Context.

Typická past je začít s jazykem, který je sice mocný, ale příliš komplexní, jako je C++ nebo Rust. Tyto jazyky vyžadují pochopení paměti, ukazatelů a dalších konceptů, které nováčka zbytečně zahltí. Rozdíl mezi tím, co zvládnete za měsíc v Pythonu a za měsíc v C++, je propastný. To neznamená, že se k nim nikdy nedostanete, ale první programovací jazyk by měl primárně budovat vaše sebevědomí, ne ho bořit.

Dalším klíčovým principem je normalizace stavu. Pokud ukládáte seznamy objektů, neskladujte je jako jeden velký seznam, ale jako objekt s klíči podle ID. Tím zjednodušíte aktualizace, vyhledávání i mazání. Například místo pole souborů mějte objekt, kde klíčem je ID souboru, a v komponentách pak používejte selektory, které data podle potřeby transformují. Tento přístup výrazně snižuje riziko nekonzistentních dat.

Nejdůležitější je sledovat, jak se mění nároky na data v čase. To, co fungovalo při stovkách záznamů, selhává u milionů. Typická chyba je spoléhat na to, že databáze si poradí sama. Neřekne vám, že chybí vhodný index, dokud není pozdě. Pravidelně proto kontrolujte plán provádění dotazů a hledejte operace typu sekvenční skenování velkých tabulek. Pokud je najdete, zvažte přidání indexu nebo přepsání dotazu – často pomůže i pouhé rozdělení složitého dotazu na menší části.

Jaké praktické kroky vedou k čistšímu kódu? Začněte tím, že si osvojíte selektory. Namísto přímého čtení stavu v každé komponentě vytvořte selektory, které izolují logiku výběru. Díky tomu změníte tvar stavu bez nutnosti přepisovat všechny komponenty. Používejte knihovnu reselect pro memoizované selektory, které se přepočítávají pouze při změně závislostí. Vyhnete se tak zbytečným výpočtům i nekonečným renderovacím cyklům.

Nejčastějším viníkem pomalého webu jsou neoptimalizované obrázky. Fotky ve vysokém rozlišení, které se na web nahrávají přímo z foťáku, dokážou zabrat i několik megabajtů. Přitom pro zobrazení na obrazovce stačí mnohem menší soubor. Používejte formáty jako WebP, které mají při stejné kvalitě výrazně nižší velikost. Obrázky také vhodně ořízněte na rozměry, v jakých se skutečně zobrazují. Nezapomínejte na atribut loading="lazy", díky kterému se obrázky mimo obrazovku nenačítají, dokud k nim uživatel nesroluje.
Pro výběr dat ze store nepoužívejte přímý přístup k němu v komponentách. Místo toho vytvořte selektory – funkce, které z celého stavu vyberou jen to, co potřebujete. Selektory můžete memoizovat pomocí knihovny Reselect, což zabrání zbytečnému přepočítávání při každém renderu. To je důležité hlavně u velkých seznamů nebo filtrovaných dat. Příklad: const selectVisibleTodos = (state) => state.todos.filter(...). Pokud použijete memoizovanou verzi, výsledek se spočítá jen když se změní vstupní data, ne při každém renderu komponenty.
Častou chybou je podceňování verzí a jejich životního cyklu. Výrobci databázových systémů poskytují opravy pouze po omezenou dobu. Po jejím uplynutí přestávají řešit bezpečnostní chyby i výkonnostní problémy. Pokud tedy běžíte na staré verzi, If you have any questions relating to the place and how to use osvětlení V obýváku, you can call us at our own web-page. nejste jen nepodporovaní – vystavujete se zbytečnému riziku. Naplánujte si upgrade s dostatečným předstihem a vyhraďte si čas na testování kompatibility s vaší aplikací. Změna hlavní verze často přináší změny v chování optimalizátoru a může odhalit skryté závislosti.