React 19 — Nowości i Zmiany

Co nowego w React 19 — use(), Actions i React Compiler?

React 19 (stabilny, grudzień 2024): use() hook — nowy, universalny hook. use(Promise) — odczytaj promise w renderze (z Suspense). use(Context) — alternatywa dla useContext, działa wewnątrz if/loops. Actions — funkcje async jako event handlers. Obsługują pending, error, optimistic updates automatycznie. useActionState(action, initialState) — stan + action w jednym. Zwraca: [state, dispatch, isPending]. Zastępuje useState + useTransition + ręczne zarządzanie. useFormStatus() — pending, data, method, action w komponencie dzieci form. Nie wymaga Context. useOptimistic(state, updateFn) — optymistyczne UI. Pokazuj stan przed odpowiedzią serwera. Automatyczny rollback przy błędzie. React Compiler (wcześniej: React Forget): automatyczne memoizowanie. Koniec ręcznego useMemo/useCallback. Statyczna analiza kodu — bezpieczna. Dostępny jako babel-plugin-react-compiler. ref jako prop (nie forwardRef): function Input({ref, ...props}) — działa w React 19. forwardRef nadal działa ale deprecated. Lepsze error reporting: Error Boundaries ulepszone. Component Stack w każdym errorze. hydration errors — dokładniejszy diff. document.title, meta, link — native support w komponentach (bez react-helmet). Preloading: preload(), preinit(), prefetchDNS() z react-dom. Resource hints bezpośrednio w React.

useActionState i useFormStatus — jak zastąpić stary pattern?

Stary pattern (React 18): const [loading, setLoading] = useState(false). const [error, setError] = useState(null). const handleSubmit = async (e) => {e.preventDefault(); setLoading(true); try {await action()} catch(err) {setError(err)} finally {setLoading(false)}}. Nowy pattern (React 19): import {useActionState} from 'react'. async function submitAction(prevState, formData) {try {const result = await fetch(...); return {data: result, error: null}} catch (e) {return {data: null, error: e.message}}}. const [state, formAction, isPending] = useActionState(submitAction, {data: null, error: null}). form action={formAction}. Automatycznie: pending zarządzany. Error z poprzedniego stanu. FormData zamiast e.preventDefault(). useFormStatus(): import {useFormStatus} from 'react-dom'. function SubmitButton() {const {pending} = useFormStatus(). return button disabled={pending}. Musi być dzieckiem form, nie useFormStatus w samym formularzu. useOptimistic(): const [optimisticItems, addOptimistic] = useOptimistic(items, (state, newItem) => [...state, newItem]). Przy addOptimistic(newItem) — UI aktualizuje się natychmiast. Po zakończeniu akcji — stan synchronizuje się. Server Actions (Next.js + React 19): 'use server' directive. async function createPost(formData: FormData) {'use server'; await db.post.create(...)}. form action={createPost} — zero JavaScript w przeglądarce dla podstawowej interakcji. Revalidacja: revalidatePath('/posts') po mutacji.

React Compiler — jak działa automatyczne memoizowanie?

React Compiler (Meta, 2024, wcześniej: React Forget): kompilator Babel/Webpack/Vite. Analiza statyczna kodu React. Automatycznie dodaje memoizowanie gdzie potrzebne. Działa bez zmian w kodzie. Cel: eliminacja potrzeby ręcznego memo/useMemo/useCallback. Jak działa: analizuje dependencies komponentu. Identyfikuje gdzie re-render jest niepotrzebny. Generuje zoptymalizowany kod JavaScript. Nie memoizuje gdy mogą być side effecty. Instalacja (Next.js 15+): experimental: {reactCompiler: true} w next.config. babel-plugin-react-compiler. vite-plugin-react-compiler dla Vite. eslint-plugin-react-compiler — walidacja kodu przed kompilacją. Reguły kompilatora: components i hooks muszą być pure (deterministyczne). Nie mutuj state bezpośrednio. Nie mutuj props. Nie mutuj wartości po renderze. Problemy z kompilacją: mutacja obiektów (np. array.push zamiast spread). useEffect bez dependencies. Biblioteki z side effects w renderze. Opt-out: 'use no memo' directive dla komponentu. React DevTools: React Compiler inspector — pokazuje co zostało zmemoizowane. Ikona Memo obok komponentu. Performance gains: mniejszy re-render tree. Eliminacja cascade rerenders. Główna korzyść: useMemo/useCallback w 95% przypadków zbędne. Hooks lint rules: react-hooks/exhaustive-deps nadal ważne dla useEffect. Compiler nie eliminuje potrzeby poprawnego useEffect.

Suspense i Concurrent Features — jak działają w React 18/19?

Concurrent React: renderowanie przerywalne. Priorytetyzacja aktualizacji. Brak blokowania main thread. useTransition: const [isPending, startTransition] = useTransition(). startTransition(() => setQuery(value)). Nisko-priorytetowa aktualizacja. UI nie blokuje się. Suspense: Suspense fallback={loading}. Pokazuje fallback podczas ładowania danych/komponentu. Wymaga: Promise w use() lub lazy(). Streaming SSR (Next.js App Router): serwer streamuje HTML stopniowo. Suspense boundaries na serwerze. Partial Prerendering (PPR, Next.js 15): statyczna powłoka + dynamiczne streamy. Najlepsze z SSG + SSR. Error Boundaries: class ErrorBoundary extends React.Component. getDerivedStateFromError(). componentDidCatch(). React 19: lepsze hydration error messages. useDeferredValue: const deferredQuery = useDeferredValue(query). Laggy input — query aktualizuje się z opóźnieniem. Wizualne wskazanie stale content. React.lazy + Suspense: const Chart = lazy(() => import('./Chart')). Suspense lazy loading. Code splitting automatyczny. Preload nowy (React 19): import {preload} from 'react-dom'. preload('/heavy-lib.js', {as: 'script'}). Hints do przeglądarki przed renderem. Concurrent Mode gotowość bibliotek: React Query — tak. Zustand — tak. Redux Toolkit — tak. Jotai — tak. MobX — wymaga adaptera. Waterfall prevention: Promise.all w Server Components. parallel data fetching.

React 19 w Next.js 15 — Server Actions, PPR i co-location?

Next.js 15 (Turbopack stabilny): Turbopack zamiast Webpack — 70% szybszy cold start. React 19 jako default. Server Actions stable. Partial Prerendering (experimental). Caching zmienione: fetch() nie cachuje domyślnie w Next.js 15. Musisz jawnie: {cache: 'force-cache'} lub unstable_cache. GET route handlers nie cachowane domyślnie. Co wymaga explicit opt-in do cache. Server Actions w Next.js 15: 'use server' na poziomie pliku lub funkcji. Mogą być wywoływane z Client Components. Form mutations + revalidatePath/revalidateTag. Automatyczny CSRF token (wbudowany). Nie wymagają API route. Turbopack: native w next dev (stable Next.js 15). Szybszy HMR. Nie wszystkie webpack pluginy kompatybilne. next build nadal Webpack (Turbopack build experimental). Async request APIs: cookies(), headers(), params, searchParams — teraz async. await cookies(), await headers(). Breaking change z Next.js 14. Instrumented Next.js: next/dist/client/instrumentation. App Router patterns: use client — interaktywne komponenty. use server — Server Actions. Layout sprawia że shared state przez Context. Parallel Routes: @slot konwencja. Intercepting Routes: (..) prefix. use cache (experimental): nowa dyrektywa. Zastępuje fetch cache options. Granular caching per function. React 19 + App Router tips: Server Components dla data fetching. Client Components dla interaktywność. Server Actions dla mutations. useOptimistic dla instant UI feedback.

Wyślij zapytanie