Es gibt generell zwei Regel für React Hooks:

Regeln 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;