React-Spickzettel
Eine durchsuchbare, druckbare React-19-Referenz — Komponenten, JSX, Hooks, die neuen Actions-APIs, Context, Refs und Performance. Kostenlos.
Komponenten & JSX
12function App() { return <h1>Hi</h1>; }
Eine Funktionskomponente, die JSX zurückgibt
export default function App() {}
Eine Komponente per Default exportieren
<Greeting name="Ada" />
Eine Komponente mit Props rendern
{1 + 2} or {user.name}
Einen JS-Ausdruck mit geschweiften Klammern einbetten
<>{a}{b}</>
Fragment gruppiert Knoten, kein zusätzliches DOM
<div className="card">
className statt class für CSS verwenden
{isOpen && <Menu />}
Bedingt mit && rendern
{ok ? <Yes /> : <No />}
Mit einem Ternary zwischen Knoten wählen
{items.map(i => <li key={i.id}>{i.t}</li>)}
Eine Liste aus einem Array rendern
function Btn({ label, onClick }) {}
Props in der Signatur destrukturieren
function Card({ children }) { return children; }
Verschachteltes JSX über die children-Prop lesen
<input value={v} onChange={onChange} />
Kontrollierte Eingabe an den State gebunden
Rendering & Setup
10import { createRoot } from 'react-dom/client'
Die Client-Root-API importieren
createRoot(document.getElementById('root')).render(<App/>)
Die App ins DOM einhängen
import { StrictMode } from 'react'
Den StrictMode-Wrapper importieren
<StrictMode><App /></StrictMode>
Bugs in der Entwicklung sichtbar machen
import { hydrateRoot } from 'react-dom/client'
Die Hydration-API importieren
hydrateRoot(el, <App />)
React an Server-HTML anhängen
root.unmount()
Eine gemountete Root abbauen
import App from './App.jsx'
Eine Komponente aus einem Modul importieren
<App {...props} />
Ein Objekt als Props spreaden
export { Button, Card }
Mehrere Komponenten per Named Export exportieren
State & Effects
12const [count, setCount] = useState(0)
Eine State-Variable deklarieren
setCount(c => c + 1)
Aus dem vorherigen Wert aktualisieren
setUser(u => ({ ...u, name }))
Objekt-State unveränderlich aktualisieren
useEffect(() => { run(); }, [dep])
Einen Effect ausführen, wenn sich Deps ändern
useEffect(() => { /* once */ }, [])
Einen Effect nur beim Mount ausführen
useEffect(() => () => cleanup(), [])
Eine Cleanup-Funktion zurückgeben
const ref = useRef(null)
Einen veränderlichen Wert über Renders hinweg halten
const [state, dispatch] = useReducer(r, init)
Komplexen State mit einem Reducer verwalten
const theme = useContext(ThemeContext)
Den nächsten Context-Wert lesen
const memo = useMemo(() => calc(a), [a])
Eine teure Berechnung memoisieren
useLayoutEffect(() => {}, [])
Synchron nach dem Layout ausführen
useSyncExternalStore(sub, get)
Einen externen Store abonnieren
React-19-Hooks & -APIs
12import { use } from 'react'
Die neue use-API importieren
const data = use(promise)
Ein Promise lesen, suspendet bis bereit
const theme = use(ThemeContext)
Context lesen, bedingt erlaubt
const [state, action, pending] = useActionState(fn, init)
State, Action und Pending verfolgen
const [opt, addOpt] = useOptimistic(state, reducer)
Einen optimistischen Wert sofort anzeigen
const { pending } = useFormStatus()
Den Submit-Status des Eltern-Formulars lesen
const [isPending, startTransition] = useTransition()
Updates als nicht dringend markieren
startTransition(async () => await save())
Eine asynchrone Action in einer Transition ausführen
const deferred = useDeferredValue(value)
Einen Wert verzögern, um die UI reaktionsfähig zu halten
const id = useId()
Eine stabile eindeutige id generieren
<title>Page title</title>
Metadaten an beliebiger Stelle im Baum rendern
function Input({ ref }) {}
ref ist eine normale Prop, kein forwardRef
Forms & Actions
12<form action={handleSubmit}>
Eine Funktion als Formular-Action übergeben
function handleSubmit(formData) {}
Die Action erhält die FormData
formData.get('email')
Ein Feld aus FormData lesen
const [state, action] = useActionState(submit, null)
Eine Action an den Komponenten-State binden
<form action={action}>
Die umschlossene Action am Formular verwenden
const [s, a, pending] = useActionState(fn, init)
Ein Pending-Flag für die UI bereitstellen
return { error: 'Invalid' }
Fehlerzustand aus einer Action zurückgeben
function Submit() { const { pending } = useFormStatus() }
Pending im Submit-Button lesen
<button disabled={pending}>Save</button>
Submit während Pending deaktivieren
import { requestFormReset } from 'react-dom'
Den Formular-Reset-Helfer importieren
requestFormReset(formEl)
Ein unkontrolliertes Formular zurücksetzen
<form action={action}><Submit /></form>
Action-Formular mit Status zusammensetzen
Props & Komposition
10function Hi({ name = 'Guest' }) {}
Standard-Prop per Destrukturierung
function Box({ children }) { return children; }
Inhalt mit der children-Prop umschließen
<Box><p>Inside</p></Box>
JSX als children übergeben
function List({ render }) { return render(); }
Render-Prop-Muster
<List render={() => <Item />} />
Eine Render-Funktion bereitstellen
<Input {...props} />
Alle Props per Spread weiterleiten
const { id, ...rest } = props
Eine Prop herauspicken und den Rest weitergeben
<Avatar {...rest} size="lg" />
Spreaden und dann eine Prop überschreiben
function Btn(props: BtnProps) {}
Props mit TypeScript-Interfaces typisieren
<Slot label={<b>Hi</b>} />
JSX über eine benannte Prop übergeben
Ereignisse
10<button onClick={handleClick}>
Einen Klick-Handler anhängen
function handleClick(e) {}
Das synthetische Ereignis empfangen
<input onChange={e => set(e.target.value)} />
Einen Eingabewert bei Änderung lesen
<form onSubmit={e => e.preventDefault()}>
Das Standard-Formular-Submit stoppen
e.stopPropagation()
Das Bubbling des Ereignisses verhindern
<li onClick={() => remove(id)}>
Argumente mit einer Closure übergeben
<input onKeyDown={e => e.key === 'Enter'}
Einen bestimmten Tastendruck behandeln
<div onMouseEnter={hover}>
Auf Pointer-Ereignisse hören
e.currentTarget.value
Das Element lesen, an dem der Handler hängt
<button onClick={() => {}} type="button">
Implizites Formularabsenden vermeiden
Listen & Keys
10arr.map(x => <li key={x.id}>{x.t}</li>)
Einen Knoten pro Element rendern
key={item.id}
Jedem Element einen stabilen Key geben
key={index}
Index-Keys nur für statische Listen
users.map(u => <Card key={u.id} {...u} />)
Element-Felder als Props spreaden
{list.length === 0 && <Empty />}
Einen Fallback für leere Listen zeigen
import { Fragment } from 'react'
Fragment für gekeyte Gruppen importieren
<Fragment key={id}>{a}{b}</Fragment>
Ein gekeytes Fragment in einer Liste
{rows.filter(r => r.on).map(...)}
Vor dem Mappen filtern
Keys must be unique among siblings
Warum Keys React beim Diffen von Listen helfen
{[...Array(n)].map((_, i) => ...)}
Einen Bereich mit fester Länge mappen
Context
10const ThemeContext = createContext('light')
Einen Context mit einem Standard erstellen
import { createContext } from 'react'
Die Context-Factory importieren
<ThemeContext value={theme}>
Einen Wert bereitstellen (React-19-Syntax)
<ThemeContext value={theme}><App /></ThemeContext>
Den Baum umschließen, der ihn liest
const theme = useContext(ThemeContext)
Context mit useContext lesen
const theme = use(ThemeContext)
Context mit der use-API lesen
if (cond) { const t = use(Ctx); }
use kann Context bedingt lesen
export const ThemeContext = createContext()
Einen gemeinsamen Context exportieren
<Ctx value={{ user, setUser }}>
Ein Objekt als Wert übergeben
Avoid new objects each render
Werte memoisieren, um Re-Renders zu begrenzen
Refs
10const inputRef = useRef(null)
Einen Ref-Halter erstellen
<input ref={inputRef} />
Den Ref an einen Knoten anhängen
inputRef.current.focus()
Den DOM-Knoten über current ansprechen
function Field({ ref }) { return <input ref={ref} /> }
ref als Prop, kein forwardRef
<Field ref={inputRef} />
Einen Ref an eine Komponente übergeben
useImperativeHandle(ref, () => ({ focus }))
Eine imperative API bereitstellen
const setRef = node => { box = node; }
Einen Callback-Ref verwenden
<div ref={setRef} />
Einen Callback-Ref anhängen
const count = useRef(0)
Einen Wert ohne Re-Rendern speichern
ref={node => { return () => cleanup(); }}
Callback-Ref mit Cleanup (React 19)
Performance
10const Memo = memo(Component)
Re-Render überspringen, wenn Props gleich sind
import { memo } from 'react'
Den memo-Helfer importieren
const value = useMemo(() => calc(a), [a])
Einen berechneten Wert cachen
const fn = useCallback(() => f(a), [a])
Eine Funktionsidentität cachen
const Lazy = lazy(() => import('./Big.jsx'))
Eine Komponente per Code-Splitting aufteilen
import { lazy, Suspense } from 'react'
lazy und Suspense importieren
<Suspense fallback={<Spin />}><Lazy /></Suspense>
Während des Ladens einen Fallback zeigen
startTransition(() => setQuery(q))
Nicht dringende State-Updates markieren
const slow = useDeferredValue(query)
Teure abgeleitete UI verzögern
React Compiler auto-memoizes
Beseitigt oft manuelle Memoisierung
Sonstiges & Metadaten
10<Suspense fallback={<Loading />}>
Grenze für asynchronen Inhalt
class ErrorBoundary extends Component {}
Render-Fehler abfangen (Legacy-Klasse)
<title>My Page</title>
Den Dokumenttitel aus einer Komponente hochziehen
<meta name="description" content="..." />
Meta-Tags in den Head rendern
<link rel="stylesheet" href="..." />
Einen Stylesheet-Link hochziehen
<Comp key={id} />
Key ändern, um eine Komponente neu zu mounten
React.lazy(() => import('./Page.jsx'))
Eine Routen-Komponente lazy importieren
createPortal(node, container)
In einen anderen DOM-Knoten rendern
{/* a comment */}
Einen Kommentar in JSX schreiben
cleanup return in useEffect
Abonnements/Timer immer freigeben
Kein Eintrag passt zu „:q“.
Brauchen Sie Hilfe?
Ein Problem mit diesem Tool gefunden? Sagen Sie es unserem Team.