Redux v Reactu: kde nejčastěji vzniká zbytečný re-render
Kde se čas ztrácí nejčastě
Naučte se odmítnout termín, o kterém víte, že je nesmyslný. Věta „tohle v tomto termínu nestihneme" je profesionální odpověď, ne slabost. Doplňte ji tím, co stihnout lze: co je nejmenší hodnota, kterou dokážete dodat včas. Klient většinou ocení jasné „ne" s alternativou víc než zdvořilé „uvidíme". Poslední pravidlo: co jste slíbili, zapište. Ústní dohoda se v hlavách obou stran mění a zápis je jediná obrana proti tomu, aby se z odhadu stal spor.
Oprávnění řeš hned, jakmile je aplikace potřebuje. Nestačí je deklarovat v manifestu, musíš si je vyžádat za běhu. Pokud uživatel odmítne, aplikace nesmí spadnout ani se zacyklit. Ošetři i situaci, kdy uživatel oprávnění později odebere v nastavení. Totéž platí pro přístup k souborům nebo k poloze. Čím dřív si na tento režim zvykneš, tím méně práce tě čeká při ladění.
Při růstu codebase se vyplatí měřit dobu běhu a míru selhání. Pokud jednotkové testy trvají déle než několik sekund, něco je špatně. Pokud integrační testy padají na náhodných chybách, je problém v izolaci nebo v prostředí. Sledujte, které testy nejčastěji padají a proč, a opravujte příčinu, ne test. Nakonec platí, že hranice mezi jednotkovými a integračními testy není dogmatická, ale musí být jasná a dodržovaná. Když ji tým zná a respektuje, růst kódu přestane být noční můrou.
Základní kostra HTML dokumentu má vždy stejnou strukturu. Na začátku je deklarace typu dokumentu, následuje kořenový element, uvnitř něj hlavička a tělo. V hlavičce se nastavuje kódování znaků a titulek stránky, v těle je samotný obsah. Kódování je potřeba nastavit správně hned na začátku, jinak se diakritika zobrazí jako náhodné znaky. Kdo tohle opomene, stráví pak hodiny hledáním chyby, která vznikla jedním chybějícím atributem.
Než začnete mluvit o datu, zjistěte, co klient skutečně potřebuje. Často nejde o přesný den, ale o to, aby něco stihl dřív než jeho vlastní zákazník, aby se vešel do rozpočtového cyklu, nebo aby měl čas na testování. Když znáte ten skutečný důvod, můžete nabídnout varianty: dodat menší funkční celek dřív a zbytek později. Tím se vyhnete buď planému slibu, nebo zbytečnému odmítnutí.
Další pastí je ignorování struktury store. Normalizovaná data – tedy entity uložené podle ID a seznamy pouze s těmito ID – výrazně zjednodušují aktualizace. Když máte hluboko vnořené objekty, každá změna znamená kopírování celé větve. To je pomalé a náchylné k chybám. Normalizace sice ze začátku vypadá jako práce navíc, ale u větších aplikací se vyplatí. Stejně tak nepoužívejte Redux pro data, která přicházejí ze serveru a mají krátkou životnost. Na to stačí lokální stav nebo knihovna pro načítání dat.
Selektory a memoizace: kde lidé přestávají Selektory by měly být čisté a pokud možno memoizované. Když vytváříte novou referenci při každém volání, například state.items.filter(...) bez memoizace, komponenta se překreslí při každé akci, i když se data nezměnila. Řešením je createSelector z knihovny Reselect. Ten si pamatuje vstupy a přepočítá výstup jen tehdy, když se změní relevantní část stavu. Pozor ale na to, že memoizace funguje pouze pro jeden argument. Pokud selektor používáte s parametry, musíte vytvořit novou instanci selektoru pro každou kombinaci, jinak si budete předávat špatná data.
Poslední věc: middleware a thunky. Není nutné používat thunk na všechno. Pokud potřebujete řešit složité asynchronní scénáře, zvažte redux-saga nebo redux-observable, ale vždy s ohledem na to, kolik toho tým zvládne udržovat. Příliš mnoho vrstev abstrakce vede k tomu, že se ztrácí přehled o tom, co se v aplikaci děje. Redux je nástroj, ne cíl. Když ho používáte vědomě a s ohledem na výkon, bude aplikace svižná a předvídatelná.
Co dělat, když se odhad začne posouvat Termín se posune skoro vždy, protože se objeví něco, co nikdo nečekal. Rozdíl mezi profesionálem a amatérem není v tom, že by se nic nepokazilo, ale v tom, kdy o tom klient ví. Ozvěte se v momentě, kdy zjistíte odchylku, ne až v den, kdy mělo být hotovo. Přineste tři věci: co se změnilo, co to znamená pro termín a co navrhujete dál. Konkrétně, ne omluvy typu „je toho hodně".
Redux sám o sobě nezaručí výkon. Problém většinou nevzniká v store, ale v tom, jak komponenty odebírají data. Pokud použijete useSelector bez rozmyšlení, každá změna v store může spustit překreslení i tam, kde to není potřeba. Základ je vrátit z selektoru co nejmenší a co nejstabilnější hodnotu. Místo celého objektu vracejte konkrétní pole, která komponenta skutečně používá. Když potřebujete více hodnot, použijte shallowEqual z React-Redux nebo více selektorů. Tím výrazně omezíte zbytečnou práci.