React Hooks haben Class Components ersetzt. Funktional, kompositorisch, einfacher — und mit ein paar Fallstricken.

Grundlegende Hooks¶

import { useState, useEffect } from ‘react’; function UserProfile({ userId }) { const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { fetch(/api/users/${userId}) .then(r => r.json()) .then(data => { setUser(data); setLoading(false); }); }, [userId]); // Dependency Array! if (loading) return

Loading…

; return

{user.name}¶

; }

Custom Hook¶

function useFetch(url) { const [data, setData] = useState(null); const [error, setError] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { fetch(url) .then(r => r.json()) .then(setData) .catch(setError) .finally(() => setLoading(false)); }, [url]); return { data, error, loading }; } // Verwendung const { data: users, loading } = useFetch(‘/api/users’);

Wichtigste Erkenntnis¶

useState für State, useEffect für Seiteneffekte, Custom Hooks für Wiederverwendung. Das Dependency Array ist entscheidend.