Es gibt generell zwei Regel für React Hooks:
- muss in einer React Komponente definiert werden
- muss auf der “obersten” Ebene definiert werden
Warum sollte man eigene React Hooks erstellen?
Ein eigener Hook ergibt Sinn, wenn Code States enthält und in mehreren Komponenten genutzt werden soll.
Beispiel Definition eines Hooks
//useFetch.js
import { useEffect, useState } from "react";
export function useFetch(fetchFn, initialValue) {
const [fetchedData, setFetchedData] = useState(initialValue);
const [isFetching, setIsFetching] = useState(false);
const [error, setError] = useState();
useEffect(() => {
async function fetchData() {
setIsFetching(true);
try {
const data = await fetchFn();
setFetchedData(data);
} catch (error) {
setError({ message: error.message || 'Failed to fetch data.' });
}
setIsFetching(false);
}
fetchData();
}, [fetchFn]);
return {
isFetching,
fetchedData,
setFetchedData,
error
}
}
Beispiel Nutzung des Hooks
//App.jsx
function App() {
const { isFetching, error, fetchedData: userPlaces, setFetchedData: setUserPlaces } = useFetch(fetchUserPlaces, []);
... Restlicher Code
}
export default App;