React 19.3
Übersicht
Dieses Skill enthält die Regeln für React 19.3, die leicht falsch angewendet werden können: Effekte, die nicht existieren sollten, Abhängigkeitsfallen, Actions und ihre Transitions, Grenzen von Server Components, die Einführung des React Compilers sowie die in Version 19 entfernten oder als veraltet markierten APIs. Jede Behauptung enthält einen Link zur entsprechenden Seite.
Behandelte Version
React 19.3, die Version, die auf react.dev dokumentiert ist. Frühere Major-Versionen befinden sich auf 18.react.dev und älteren Seiten. https://react.dev/versions
Lies den Schnellstart und öffne dann die Referenzdatei, die zur Aufgabe passt.
Schnellstart
- Verwende einen Effekt nur, um mit einem System zu synchronisieren, das React nicht selbst steuert. Leite Werte während des Renderings ab, setze den Zustand mit einem
keyzurück und führe benutzerverursachte Logik in Event-Handlern aus. https://react.dev/learn/you-might-not-need-an-effect - Abhängigkeiten folgen dem Code: unterdrücke niemals
react-hooks/exhaustive-deps. Um eine Abhängigkeit zu entfernen, verschiebe Objekte und Funktionen in den Effekt, verwende einen Updater oder lies den Wert aus einem Effect Event. https://react.dev/learn/removing-effect-dependencies
const onConnected = useEffectEvent(() => {
showNotification('Verbunden!', theme);
});
useEffect(() => {
const connection = createConnection(serverUrl, roomId);
connection.on('connected', () => { onConnected(); });
connection.connect();
return () => connection.disconnect();
}, [roomId]);
https://react.dev/learn/separating-events-from-effects
- Ein Effekt muss Setup, Bereinigung und erneutes Setup überstehen: Der Strict Mode führt dies in der Entwicklung aus. Korrigiere die Bereinigung, verstecke den zweiten Durchlauf niemals mit einem Ref-Guard. https://react.dev/learn/synchronizing-with-effects
refist eine Prop von Funktionskomponenten. Verwende<Context value={x}>als Provider. Ein Ref-Callback kann seine Bereinigung zurückgeben. https://react.dev/reference/react/useRef und https://react.dev/reference/react/createContext und https://react.dev/reference/react-dom/components/common- Ein Zustand, der nach einem
awaitinnerhalb vonstartTransitiongesetzt wird, ist keine Transition: umschließe ihn mit einem weiterenstartTransition. https://react.dev/reference/react/useTransition - Bei
<form action>erhält deruseActionState-Reducer(prevState, formData). RufedispatchActionvon einer Action aus auf: eine<form action>oderstartTransition. https://react.dev/reference/react/useActionState useFormStatusliest nur das übergeordnete<form>: rufe es in einer Kindkomponente auf. https://react.dev/reference/react-dom/hooks/useFormStatususe(promise)benötigt ein gecachtes Promise: eines, das während des Renderings erstellt wird, wird bei jedem Rendering neu erstellt. Umschließeuseniemals mittry/catch: verwende eine Error Boundary. https://react.dev/reference/react/use'use server'kennzeichnet Server Functions, niemals Server Components, die keine Direktive haben. Validiere jedes Server Function-Argument und überprüfe die Autorisierung. https://react.dev/reference/rsc/server-components und https://react.dev/reference/rsc/use-server- Browser-only-Komponente:
use(browser()),browserausreact-dom, unter einer<Suspense>-Grenze, anstelle vontypeof windowoder einem gemounteten Flag. https://react.dev/reference/react-dom/browser - Mit dem React Compiler schreibe einfachen Code und behalte
useMemooderuseCallbacknur für präzise Kontrolle, z. B. für eine Effekt-Abhängigkeit. Lasse vorhandene Memoisierung bestehen. https://react.dev/learn/react-compiler/introduction - Lint mit
eslint-plugin-react-hooksrecommended. Es enthält die Compiler-Regeln, daher entferneeslint-plugin-react-compiler. https://react.dev/blog/2025/10/07/react-compiler-1 - Definiere Komponenten auf Modulebene, niemals innerhalb einer anderen Komponente. https://react.dev/reference/eslint-plugin-react-hooks/lints/static-components
- Setze niemals eine Zahl links von
&&:count && <p/>gibt0aus. https://react.dev/learn/conditional-rendering
Referenzdateien
| Datei | Öffnen für |
|---|---|
| references/state.md | useState, Updater, Setzen während des Renderings, useReducer, unveränderliche Updates, Zustandsstruktur, key-Resets |
| references/refs-and-context.md | useRef, Ref-Callbacks, ref als Prop, useImperativeHandle, Context, useId, useSyncExternalStore |
| references/effects.md | Wann kein Effekt verwendet werden sollte, useEffect-Timing, Strict Mode-Bereinigung, Datenabruf, useLayoutEffect, useInsertionEffect |
| references/effect-dependencies.md | Entfernen von Abhängigkeiten, useEffectEvent, benutzerdefinierte Hooks, additionalEffectHooks |
| references/memoization.md | useMemo, useCallback, memo, mit und ohne Compiler |
| references/react-compiler.md | Installation, Optionen, Direktiven, schrittweise Einführung, Debuggen des Compilers |
| references/rules-and-lints.md | Regeln von React, Regeln von Hooks, eslint-plugin-react-hooks-Regeln, Strict Mode |
| references/components-and-tooling.md | Keys, bedingtes Rendering, Fragment-Refs, Profiler, act, TypeScript, DevTools |
| references/transitions-and-suspense.md | useTransition, startTransition, useDeferredValue, use, lazy, <Suspense> |
| references/view-transitions-and-activity.md | <ViewTransition>, addTransitionType, <Activity> |
| references/actions-and-optimistic.md | useActionState, useOptimistic, useFormStatus, <form action> |
| references/form-elements-and-events.md | Kontrollierte Eingaben, <select>, <textarea>, gemeinsame Props, Events, benutzerdefinierte Elemente |
| references/server-components.md | Server Components, 'use client', serialisierbare Props, cache, cacheSignal, Taint |
| references/server-functions.md | 'use server', Aufrufen von Server Functions, Permalink, Sicherheit |
| references/client-roots-and-hydration.md | createRoot, hydrateRoot, Konflikte, Fehlerberichterstattung, Error Boundaries |
| references/server-rendering.md | renderToPipeableStream, renderToReadableStream, Statuscodes, prerender, resume |
| references/dom-apis-and-resources.md | browser, createPortal, flushSync, preload, preinit, <img>, <link>, <script>, <title> |
| references/upgrading-to-19.md | Upgrade-Schritte, Codemods, entfernte und veraltete APIs, TypeScript-Änderungen, 19.2 und 19.3 |
| references/legacy-apis.md | Children, cloneElement, Klassenkomponenten, forwardRef, PureComponent |
Alte Muster
| Alte Verwendung | Ersatz | Quelle |
|---|---|---|
forwardRef((props, ref) => ...) | function MyInput({ ref, ...props }) | https://react.dev/reference/react/forwardRef |
<Context.Provider value={x}> | <Context value={x}> | https://react.dev/reference/react/createContext |
<Context.Consumer> Render-Prop | useContext(Context) oder use(Context) | https://react.dev/reference/react/createContext |
ReactDOM.useFormState | useActionState aus react | https://react.dev/blog/2024/12/05/react-19 |
ReactDOM.render, ReactDOM.hydrate | createRoot(el).render(), hydrateRoot | https://react.dev/reference/react-dom |
unmountComponentAtNode | root.unmount() | https://react.dev/reference/react-dom |
findDOMNode | DOM-Refs | https://react.dev/blog/2024/04/25/react-19-upgrade-guide |
String-Refs, this.refs | Ref-Callbacks oder createRef | https://react.dev/blog/2024/04/25/react-19-upgrade-guide |
contextTypes, getChildContext | createContext, static contextType | https://react.dev/blog/2024/04/25/react-19-upgrade-guide |
element.ref | element.props.ref | https://react.dev/blog/2024/04/25/react-19-upgrade-guide |
react-test-renderer, Shallow Rendering | Testing Library | https://react.dev/blog/2024/04/25/react-19-upgrade-guide |
Globaler JSX-Namespace in Typen | declare module "react" { namespace JSX {} } | https://react.dev/blog/2024/04/25/react-19-upgrade-guide |
| UMD-Build-Script-Tag | ESM-CDN wie esm.sh | https://react.dev/blog/2024/04/25/react-19-upgrade-guide |
propTypes | TypeScript | https://react.dev/blog/2024/04/25/react-19-upgrade-guide |
defaultProps einer Funktionskomponente | ES-Standardparameter | https://react.dev/blog/2024/04/25/react-19-upgrade-guide |
import { act } from 'react-dom/test-utils' | import { act } from 'react' | https://react.dev/blog/2024/04/25/react-19-upgrade-guide |
Synchrones act(() => ...) | await act(async () => ...) | https://react.dev/reference/react/act |
Ref-Callback mit null-Aufruf | Gib eine Bereinigungsfunktion zurück | https://react.dev/reference/react-dom/components/common |
renderToString für SSR | renderToPipeableStream oder renderToReadableStream | https://react.dev/reference/react-dom/server/renderToString |
renderToNodeStream, renderToStaticNodeStream | Streaming-APIs von react-dom/server | https://react.dev/reference/react-dom |
| Werfen auf dem Server, um SSR zu überspringen | use(browser()) | https://react.dev/reference/react/Suspense |
isClient-Zustand in einem Effekt gesetzt, typeof window im Rendering | use(browser()) unter <Suspense> | https://react.dev/reference/react-dom/browser |
eslint-plugin-react-compiler | eslint-plugin-react-hooks | https://react.dev/blog/2025/10/07/react-compiler-1 |
"use no forget" | "use no memo" | https://react.dev/reference/react-compiler/directives/use-no-memo |
react({ babel: { plugins: [...] } }) auf @vitejs/plugin-react 6 | reactCompilerPreset mit @rolldown/plugin-babel | https://react.dev/learn/react-compiler/installation |
componentWillMount, componentWillReceiveProps, componentWillUpdate | UNSAFE_-Namen oder die Alternativen der Seite | https://react.dev/reference/react/Component |