React Compiler w projekcie legacy — jak wdrożyć krok po kroku

React Compiler wdrożenie w projekcie legacy

Nowe projekty to bajka. Zaczynacie od czystej kartki, instalujecie React Compiler od razu, konfigurujecie ESLint i wszystko działa. Ale większość z nas nie ma tego luksusu.

Mam w swoim portfolio projekty, które zaczęły się w czasach, gdy useMemo i useCallback były jedynym sposobem na optymalizację. Kod pisany przez kilka lat, przez kilka zespołów, z różnymi standardami — albo bez nich. I właśnie dla takich projektów ten wpis powstał.

Pokażę Wam, jak podejść do wdrożenia React Compilera nie w idealnym świecie, ale w tym prawdziwym — gdzie macie 300 komponentów, połowa naruszeń Rules of React jest nieświadoma, a testy… są albo ich nie ma.

pnpm – czyli dlaczego warto przestać marnować miejsce na dysku

Jeśli pracujecie z JavaScript od jakiegoś czasu, na pewno macie zainstalowane npm – bo jest domyślnie z Node.js i trudno go uniknąć. Być może używacie też yarna, bo w 2016 roku był naprawdę szybszy od npm i jako pierwszy wprowadził lockfile. Ale pnpm? Przez długi czas był niszowy, a dziś trudno otworzyć dokumentację jakiegokolwiek nowoczesnego narzędzia JS i go nie zobaczyć. Myślę, że warto wyjaśnić skąd ta popularność i czy jest uzasadniona.

9 błędów, które zablokują React Compiler (i jak wykrywa je ESLint)

W poprzednich notkach pisałam już o React Compiler od podstaw — czym jest i jak działa (React Compiler – Kompletny Przewodnik), jak go podglądać w akcji (React Compiler Playground), a także jak pisać kod, który kompilator potrafi zoptymalizować (Jak pisać kod, który React Compiler potrafi zoptymalizować).

Czas zobaczyć, co się dzieje, gdy kod łamie Rules of React.

Przygotowałam w tym celu aplikację demo, którą możecie: