Compiler nepřidává optimalizaci, přesouvá odpovědnost za čistotu na tebe
React Compiler běží při buildu a doplní do komponent a hooků memoizaci, která odpovídá ručnímu useMemo, useCallback a React.memo. Marketingová věta zní, že memoizaci už nemusíš řešit.
Přesnější je jiná věta. Compiler nepočítá nic chytřeji než ty, jen to dělá důsledně — a to si může dovolit jen proto, že o tvém kódu něco předpokládá. Ten předpoklad se jmenuje Pravidla Reactu a dosud to byla stylistická doporučení.
Dvě věci, které skutečně dělá
První je zastavení kaskádových re-renderů. Když se změní stav rodiče, překreslí se normálně i děti, kterým se props nezměnily. Compiler jim memoizuje props, takže se překreslí jen ty, jejichž vstupy se opravdu liší.
Druhá je memoizace drahých výpočtů uvnitř komponenty nebo hooku. Volání, které zpracovává velké pole, se při nezměněném vstupu nepočítá znovu.
To je celý rozsah. Compiler neřeší algoritmickou složitost, neřeší pomalý fetch, neřeší velikost bundlu. Opravuje výhradně tu třídu problémů, kterou bys jinak opravil ručně memoizací, a všechno ostatní nechává tak, jak je.
Pravidla Reactu přestala být rada
Aby compiler mohl výpočet přeskočit, musí platit, že jeho zopakování se stejnými vstupy dá stejný výsledek. Komponenta tedy musí být čistá funkce a hooky se musí volat podle pravidel.
Tohle vždycky platilo teoreticky. Rozdíl je v tom, že dřív se porušení projevilo občasným podivným chováním a většinou prošlo. Teď se porušení projeví tím, že compiler přeskočí výpočet, jehož vedlejší efekt jsi potřeboval. Nečistota se z drobného zápachu stala vadou překladu.
Únikový východ je řada direktiv. "use no memo" na začátku funkce nebo modulu ji z překladu vyjme, "use memo" ji naopak přihlásí. Režim se řídí volbou compilationMode: v annotation se překládá jen to, co je výslovně označené, v infer rozhoduje compiler sám a direktivy ho přebijí, v all se překládá všechno kromě odhlášeného.
Direktivy jsou tedy nouzový nástroj pro ladění, ne způsob práce. Když je potřebuješ často, tvůj kód nesplňuje předpoklad a compiler jen zviditelnil něco, co tam bylo předtím.
Kde končí jeho dosah
Compiler pracuje na úrovni komponenty a hooku. Samostatnou utilitu mimo React neošetří, protože nemá kde držet cache vázanou na render.
Důležitější omezení je, že memoizaci nesdílí napříč komponentami. Když stejná funkce běží se stejnými vstupy v deseti komponentách, dostane deset nezávislých cache. Pro opravdu drahý výpočet používaný na mnoha místech tedy ruční memoizace mimo React pořád dává smysl.
Z toho plyne i doporučení pro existující kód: stávající useMemo a useCallback nemaž plošně. Compiler umí koexistovat s ručně napsanou memoizací a ruční varianta občas vyjadřuje záměr, který compiler nemá jak odvodit.
Co si z toho odnést
Compiler neposouvá strop výkonu, posouvá spolehlivost. Ruční memoizace selhává na lidských chybách typu funkce vytvořené inline, která rozbije závislost. Tyhle chyby zmizí. To, co memoizace neumí, zůstává přesně tam, kde bylo.
Skutečná změna je v tom, co po tobě codebase vyžaduje. Čistota komponent přestala být otázkou vkusu a stala se kontraktem vůči nástroji, který na jejím základě vynechává práci. Když do renderu píšeš vedlejší efekty nebo mutuješ props, dosud jsi měl riziko. Teď máš chybu.
Před zapnutím se proto vyplatí jiný postup než ladit performance. Projdi místa, kde render dělá víc než počítá, a nech compiler běžet nejdřív v režimu infer na novém kódu. Přeskočený výpočet se hledá hůř než pomalý.