Checklist na výkon Reactu, který skutečně používám

Většina rad o výkonu Reactu je buď příliš abstraktní na to, aby se podle ní dalo jednat, nebo příliš ušitá na konkrétní bug někoho jiného. Tohle je seznam, který skutečně projdu, než prohlásím obrazovku za hotovou — přesně v tomhle pořadí, protože na pořadí záleží: první dva body odchytí většinu problémů a zbytek je pro případy, kdy neodchytí.

1. Nejdřív profilovat, pak sahat na kód. Otevřít profiler v React DevTools, zaznamenat tu interakci, která se zdá pomalá, a podívat se, které komponenty se překreslily a proč. Hádání, která komponenta brzdí, sežere víc času, než kolik nakonec stojí samotná oprava.
2. Zkontrolovat počet překreslení položek seznamu. Pokud se seznam 200 řádků celý překreslí při každém stisku klávesy v nesouvisejícím filtrovacím poli, stav pravděpodobně leží příliš vysoko ve stromu. Přesunout stav pole níž, nebo stav seznamu výš nad pole, to obvykle vyřeší jedním tahem.
3. Hledat objekty a pole vytvářené přímo v renderu. style={{ margin: 8 }} nebo options={[...]} napsané inline vytvoří novou referenci při každém renderu, což tiše zneškodní memo u čehokoliv, co to dostane jako prop. Vytáhnout literál ven nebo ho obalit do useMemo stojí jeden řádek.
4. Ověřit, že klíče jsou stabilní, ne indexy. Klíč-index vypadá v pořádku, dokud se řádky nevkládají nebo neodstraňují — v tu chvíli React znovupoužije špatný DOM uzel a lokální stav, otevřený dropdown, zaostřené pole, skočí na špatný řádek. Před každým releasem grepuju key={i}.
5. Zkontrolovat, co je ve startovním JS bundlu. Modal, knihovna grafů nebo rich text editor importovaný na začátku souboru routy putuje ke každému, kdo stránku navštíví — i k těm 5 %, co modal nikdy neotevřou. next/dynamic s ssr: false pro cokoliv skryté za kliknutím to opraví za pár minut a bývá to obvykle nejvýznamnější položka na seznamu.
6. Měřit na reálných datech, nepředpokládat. Padesát řádků ve vývoji se chová úplně jinak než pět tisíc u skutečného zákazníka. Speciálně pro tuhle kontrolu mám jeden nasetovaný dataset v realistickém měřítku, protože „za vývoje to působilo rychle“ není benchmark.

Nic z toho není exotické. Seznam funguje právě proto, že je nudný a opakovatelný — projíždím ho pokaždé stejně, místo abych reflexivně sáhl po memo a doufal.