Reaktion 19, das Ende 2024 veröffentlicht und von 2025 bis 2026 weit verbreitet ist, bringt die bedeutendsten Änderungen seit Hooks mit sich. Der neue Compiler, Serverkomponenten, Aktionen und der vereinfachte Kontext verändern die Art und Weise, wie React-Apps erstellt werden.
📋 Table of Contents
React Compiler – Kein useMemo/useCallback mehr
Der React Compiler merkt sich automatisch Komponenten und Werte. Entfernen Sie die meistenuseMemo,useCallback, undmemo()Anrufe.
// React 18: Manual memoization
const ExpensiveComponent = memo(({ data }) => {
const processed = useMemo(() => processData(data), [data]);
const handleClick = useCallback(() => onClick(data), [data, onClick]);
return <div onClick={handleClick}>{processed}</div>;
});
// React 19: Compiler handles it automatically
function ExpensiveComponent({ data }) {
const processed = processData(data);
return <div onClick={() => onClick(data)}>{processed}</div>;
}Serverkomponenten
Serverkomponenten werden auf dem Server ausgeführt, greifen direkt auf Datenbanken zu und senden kein JavaScript an den Client. Standard in Next.js 14+.
// app/users/page.tsx — runs on server, no JS sent to client
import { db } from '@/lib/db';
export default async function UsersPage() {
const users = await db.query('SELECT * FROM users LIMIT 10');
return (
<ul>
{users.map(u => <li key={u.id}>{u.name}</li>)}
</ul>
);
}Aktionen – Server und Client
Aktionen ersetzen das alte Event-Handler- und Abrufmuster. Behandeln Sie ausstehende Status, Fehler und optimistische Updates automatisch.
async function createUser(formData: FormData) {
'use server';
const name = formData.get('name') as string;
await db.insert('users', { name });
revalidatePath('/users');
}
export default function CreateUserForm() {
return (
<form action={createUser}>
<input name="name" placeholder="Name" />
<button type="submit">Create</button>
</form>
);
}useActionState-Hook
Verfolgt den Status „Ausstehend“, „Fehler“ und „Erfolg“ automatisch. Ersetzt ausführliches useState + manuelle Formularverarbeitung.
import { useActionState } from 'react';
async function signUp(prevState, formData) {
const email = formData.get('email');
try {
await createAccount(email);
return { success: true };
} catch (e) {
return { error: e.message };
}
}
function SignUpForm() {
const [state, action, isPending] = useActionState(signUp, null);
return (
<form action={action}>
<input name="email" type="email" />
{state?.error && <p className="error">{state.error}</p>}
{state?.success && <p>Account created!</p>}
<button disabled={isPending}>
{isPending ? 'Creating...' : 'Sign Up'}
</button>
</form>
);
}use() Hook – Asynchron in Komponenten
Lesen Sie Versprechen und Kontext inline. Nicht mehruseEffectzum Datenabruf in Client-Komponenten.
import { use, Suspense } from 'react';
async function fetchUser(id) {
const res = await fetch(`/api/users/${id}`);
return res.json();
}
function UserCard({ userPromise }) {
const user = use(userPromise); // Suspense-aware
return <div>{user.name}</div>;
}
// In parent:
<Suspense fallback={<Skeleton />}>
<UserCard userPromise={fetchUser(userId)} />
</Suspense>Vereinfachter Kontext
Kontextanbieter verwenden jetzt<Context>direkt – nicht mehr.Provider.
const ThemeContext = createContext('light');
// React 19: Direct
function App() {
return (
<ThemeContext value="dark">
<Page />
</ThemeContext>
);
}
// React 18: Required .Provider
function App() {
return (
<ThemeContext.Provider value="dark">
<Page />
</ThemeContext.Provider>
);
}Fazit
React 19 ist die bisher entwicklerfreundlichste Version. Der Compiler eliminiert Leistungs-Boilerplates, Serverkomponenten reduzieren die Bundle-Größe und Aktionen vereinfachen die Formularverarbeitung. Wenn Sie noch React 17 oder 18 verwenden, führen Sie jetzt ein Upgrade durch.
🔗 Share this article
✍️ Leave a Comment