Beispiel mit API
Die Integration von externen APIs in React-Anwendungen erfordert strukturierte Ansätze für effizientes Datenmanagement. Custom Hooks bieten hierfür eine elegante Abstraktionsebene, die API-Aufrufe, Statusverwaltung und Fehlerbehandlung kapselt. Dieser Beitrag demonstriert anhand eines praktischen Beispiels, wie maßgeschneiderte Hooks die API-Kommunikation vereinfachen, den Code besser organisieren und die Wiederverwendbarkeit maximieren. Die vorgestellten Implementierungsmuster zeigen, wie moderne React-Anwendungen von einer sauberen Trennung zwischen Datenlogik und UI-Komponenten profitieren und dadurch wartbarer und skalierbarer werden.
Inhaltsverzeichnis
Beschreibung
In diesem Beispiel bauen wir einen Custom Hook auf, um bequem und wiederverwendbar mit API zu arbeiten.
Das Beispiel zeigt eine einfache Implementierung. Man kann es sicher noch um bestimmte Funktionalitäten ergänzen.
Custom Hook für API
Im ersten Schritt bauen wir unseren Custom Hook useFetch auf und platzieren dort die wichtigste Funktionalität, um Daten von einer API abzurufen.
Unser Hook wird zunächst einen Parameter annehmen - die API-URL, von der die Daten geladen werden sollen.
Wir werden ebenfalls eine Möglichkeit einbauen, um Daten erneut von der URL zu laden. Dazu verwenden wir reloadTrigger. Dieser Zustandswert wird nichts sinnvolles tun, außer eine Neuausführung des useEffect Hooks zu triggern, nachdem sich reloadTrigger ändert. Diese Variable wurde als eine Abhängigkeit an useEffect übergeben. Sprich, bei jeder Änderung wird dieser Hook wieder ausgeführt.
import { useState, useEffect, useCallback } from 'react';
function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [reloadTrigger, setReloadTrigger] = useState(0);
const reload = useCallback(() => {
setReloadTrigger((prev) => prev + 1);
}, []);
useEffect(() => {
let isMounted = true;
setLoading(true);
setError(null);
fetch(url)
.then((response) => {
if (!response.ok) {
throw new Error(`HTTP-Fehler! Status: ${response.stratus}`);
}
return response.json();
})
.then((json) => {
if (isMounted) {
setData(json);
setLoading(false);
}
})
.catch((error) => {
if (isMounted) {
setError(error.message);
setLoading(false);
}
});
return () => {
isMounted = false;
};
}, [url, reloadTrigger]);
return { data, loading, error, reload };
}
export default useFetch;Verwendung - Haupt-Component
In unserem Haupt-Component verwenden wir nun unseren Custom Hook, um Daten von einer API zu laden und in einer minimalen Form beispielhaft auszugeben.
import useFetch from './useFetch';
function CustomHookApiExample() {
const {
data,
loading,
error,
reload
} = useFetch('https://dummyjson.com/users?limit=3&delay=1000');
if (loading) return <p>Lade Benutzer ...</p>
if (error) return <p>Fehler: {error}</p>
return (
<>
<button onClick={reload}>Neu laden</button>
<hr />
<div className="user-list">
{data.users.map(user => (
<div className="user" key={user.id}>
<p>[{user.id}] {user.firstName} {user.lastName}</p>
</div>
))}
</div>
</>
);
}
export default CustomHookApiExample;Damit haben wir unseren Custom Hook für die Verwendung von API-Aufrufen aufgebaut.
