React Hooks nahradily class components. Funkcionální, kompozitní, jednodušší — a s pár gotchas.
Základní 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 }; } // Použití const { data: users, loading } = useFetch(‘/api/users’);
Klíčový takeaway¶
useState pro stav, useEffect pro side effects, custom hooks pro reuse. Dependency array je klíčový.