react-modernization

Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to latest React versions.

1. Zidentyfikuj bieżącą wersję React w swoim projekcie i określ docelową wersję (17, 18 lub najnowszą). Umiejętność wspiera ścieżkę uaktualnień React 16 → 17 → 18 z uwzględnieniem zmian łamiących zgodność w każdej wersji.

2. Przygotuj listę komponentów klasowych, które chcesz migrować na komponenty funkcyjne. Umiejętność pokaże ci, jak zamienić state zarządzany przez konstruktor i setState na hooki useState, oraz jak przenieść logikę z metod cyklu życia na useEffect.

3. Zastosuj codemody do automatycznej transformacji kodu. Umiejętność dostarcza gotowe wzorce refaktoryzacji — na przykład konwersji event delegation po zmianach w React 17, usunięcia event pooling, czy dostosowania czasu czyszczenia efektów.

4. Zaktualizuj konfigurację JSX, jeśli przechodzisz na React 17+. Nowa transformacja JSX nie wymaga importu React w każdym pliku — umiejętność wskaże, gdzie można usunąć zbędne importy.

5. Włącz funkcje współbieżne dostępne w React 18+: automatic batching, Suspense na serwerze i nowe API root. Umiejętność wyjaśni, jak te zmiany wpływają na Strict Mode i renderowanie.

6. Przetestuj aplikację pod kątem zmian zachowania, szczególnie w zakresie podwójnego wywoływania efektów w Strict Mode i nowego API renderowania. Umiejętność wspiera też modernizację wzorców zarządzania stanem i migrację na TypeScript.