UseDashboardData — prosty hook do Twojego dashboardu w React
Pracujesz nad panelem administracyjnym i ciągle powtarzasz to samo? Fetch, loader, error, reload… Nuda! Na szczęście jest useDashboardData, który zrobi całą brudną robotę za Ciebie.
Spójrz na przykład:
function useDashboardData(fetchDataFn) {
const [data, setData] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const reload = useCallback(async () => {
setLoading(true); setError(null);
try {
setData(await fetchDataFn());
} catch (e) {
setError(e.message || "Coś poszło nie tak 😬");
} finally {
setLoading(false);
}
}, [fetchDataFn]);
useEffect(() => { reload(); }, [reload]);
return { data, loading, error, reload };
}
Jak używać?
Podajesz mu swoją funkcję getUsers i masz wszystko pod kontrolą:
function UserList() {
const { data: users, loading, error, reload } = useDashboardData(getUsers);
if (loading) return <p>Ładowanko...</p>;
if (error) return <p>Błąd: {error}</p>;
return (
<>
<button onClick={reload}>Odśwież</button>
<ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>
</>
);
}
I tyle! Teraz masz mniej kodu, mniej stresu i więcej czasu na kawę.
Inne z tej kategorii: Programowanie
Takie tam: www.marczuk.org