React

Was ist es?

React ist die deklarative UI-Library von Meta — Komponenten + Hooks + virtuelles DOM. React 19 bringt stabilen use()-Hook, Actions, useOptimistic, useFormStatus und den React Compiler (auto-memoization).

Quickstart

pnpm create vite@latest my-app -- --template react-ts
# oder als Teil von Next.js / Remix
pnpm add react@19 react-dom@19

Typische Patterns

• Server Components + Client Components trennen — Daten-Fetching server, Interaktion client.
• use() für Promises in Components (React 19):

  function Comments({ promise }) {
    const data = use(promise) // suspendet automatisch
    return <ul>{data.map(...)}</ul>
  }
  

• Actions statt manuelles Loading-State:

  const [state, action, pending] = useActionState(submit, null)
  

• useOptimistic für instant UI bei Mutations.
• Custom Hooks für Logik-Reuse — Konvention useXxx, dürfen nur in Components/anderen Hooks aufgerufen werden.

Gotchas / Was oft schiefgeht

• Stale Closures in useEffect ohne korrekte Deps — ESLint-Plugin react-hooks/exhaustive-deps ist Pflicht.
• useEffect läuft im StrictMode zweimal in dev — Cleanup-Funktionen müssen idempotent sein.
• key={index} in Listen mit reorder/insert → Bugs. Stabile IDs nutzen.
• Mit React 19 Compiler braucht man useMemo/useCallback meist nicht mehr — Manual-Memo kann sogar bremsen.
• useState-Initializer mit teurer Berechnung: Function-Form nutzen (useState(() => expensive())), sonst läuft sie bei jedem Render.

Wann nicht?

Statische Marketing-Site mit minimaler Interaktion → reines HTML/CSS oder Astro. Sehr komplexe Realtime-State-Maschinen → XState oder Signals (Solid/Svelte) können besser passen.