React Hooks
Custom Hooks
Saját hook írása – logika kiemelése újrafelhasználható hookba.
Custom Hooks
Mire való?
Saját logika kiemelése újrafelhasználható hookba – ha ugyanazt a state/effect logikát több komponensben is használod.
Mikor írj custom hookot?
- Ugyanaz a fetch logika kellene több helyen.
- Komplex event listener kezelés.
- Lokális storage olvasás/írás.
Szabály: A neve mindig use-zal kezdődjön!
// hooks/useFetch.js
import { useState, useEffect } from 'react';
export function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
setLoading(true);
fetch(url)
.then(res => res.json())
.then(data => {
setData(data);
setLoading(false);
})
.catch(err => {
setError(err);
setLoading(false);
});
}, [url]);
return { data, loading, error };
}
// Használat bármely komponensben:
function UserCard({ userId }) {
const { data, loading, error } = useFetch(`/api/users/${userId}`);
if (loading) return <p>Töltés...</p>;
if (error) return <p>Hiba!</p>;
return <div>{data.name}</div>;
}