React 19 mit Claude Code: Neue Features & Migration 2026

# Prompt: "Erstelle ein Login-Formular mit useActionState und Server Actions" // actions.ts (Server Action) 'use server'; export async function loginAction(prevState: any, formData: FormData) { const email = formData.get('email') as string; const password = formData.get('password') as string; try { await auth.signIn({ email, password }); return { success: true, error: null }; } catch (e) { return { success: false, error: 'Ungültige Zugangsdaten' }; } } // LoginForm.tsx 'use client'; import { useActionState } from 'react'; // React 19! import { loginAction } from './actions'; export function LoginForm() { const [state, formAction, isPending] = useActionState(loginAction, { success: false, error: null, }); return ( <form action={formAction}> <input name="email" type="email" required /> <input name="password" type="password" required /> {state.error && <p className="error">{state.error}</p>} <button disabled={isPending}> {isPending ? 'Wird angemeldet...' : 'Anmelden'} </button> </form> ); } // Kein useState, kein onSubmit Handler, kein fetch — alles eingebaut!

# Prompt: "Todo-Liste mit optimistic Updates — UI sofort aktualisieren" import { useOptimistic, useTransition } from 'react'; function TodoList({ todos }: { todos: Todo[] }) { const [optimisticTodos, addOptimisticTodo] = useOptimistic( todos, (state: Todo[], newTodo: Todo) => [...state, newTodo] ); const [isPending, startTransition] = useTransition(); async function handleAdd(text: string) { const optimisticTodo = { id: 'temp', text, done: false }; startTransition(async () => { addOptimisticTodo(optimisticTodo); // UI sofort aktualisieren await saveTodo(text); // Server-Call im Hintergrund // Bei Fehler: React rollt automatisch zurück! }); } return ( <ul> {optimisticTodos.map(todo => ( <li key={todo.id} style={{ opacity: todo.id === 'temp' ? 0.6 : 1 }}> {todo.text} </li> ))} </ul> ); }

# Prompt: "Lese einen Promise direkt im Component mit use()" import { use, Suspense } from 'react'; // use() löst Promises auf — kein useEffect nötig! function UserProfile({ userPromise }: { userPromise: Promise<User> }) { const user = use(userPromise); // Suspense wird geworfen bis resolved return <div>{user.name}</div>; } // Eltern-Component wrapped in Suspense: function App() { const userPromise = fetchUser(123); // Kein await! return ( <Suspense fallback={<div>Lädt...</div>}> <UserProfile userPromise={userPromise} /> </Suspense> ); } // use() kann auch Context lesen (bedingt — kein useContext-Limit!): function ConditionalTheme({ show }: { show: boolean }) { if (!show) return null; const theme = use(ThemeContext); // ✅ In if-Block — mit use() erlaubt! return <div style={{ color: theme.primary }}>Theme aktiv</div>; }

# Vorher (React 18): forwardRef boilerplate const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => { return <input {...props} ref={ref} />; }); # React 19: ref ist normaler Prop! function Input({ ref, ...props }: InputProps & { ref?: React.Ref<HTMLInputElement> }) { return <input {...props} ref={ref} />; } # Nutzung bleibt gleich: const inputRef = useRef<HTMLInputElement>(null); <Input ref={inputRef} placeholder="Text eingeben" />

# Prompt: "Prüfe mein Projekt auf React 19 Breaking Changes" # Breaking Changes — Claude Code prüft diese automatisch: # 1. ReactDOM.render() → createRoot() (schon seit React 18 deprecated) # 2. string refs → useRef() (schon lange deprecated) # 3. defaultProps auf Function Components entfernt (→ JS default params) # 4. propTypes entfernt (→ TypeScript) # 5. Legacy Context API (contextTypes/childContextTypes) entfernt # 6. ReactDOM.findDOMNode() entfernt # Migration-Script (codemod): npx codemod@latest react/19/replace-reactdom-render npx codemod@latest react/19/replace-string-ref npx codemod@latest react/19/replace-act-import npx codemod@latest react/19/replace-use-form-state # Neue React 19 Dev Tools Warnung prüfen: # "findDOMNode is deprecated" → sofort migrieren