Know-How
React Hooks tutorial
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ý.