Dein eigener Hook

In der Lektion über Effekte hast du dafür gesorgt, dass die Favoriten bleiben: ein useState mit einer Funktion, die localStorage liest, und ein Effekt, der dorthin speichert. Jetzt hat die App auch Notizen, und auch sie sollen bleiben. Du könntest diese Zeilen nach Notizen.jsx kopieren und den Schlüssel ändern. React erlaubt dir aber etwas Besseres: Schreibe die Zeilen einmal in eine eigene Funktion und rufe sie aus beiden Komponenten auf.

Eine solche Funktion ist dein eigener Hook: eine Funktion, deren Name mit use beginnt und die andere Hooks aufruft. Hier ist ein kleiner. Er merkt sich true oder false und gibt es zusammen mit einer Funktion zurück, die es umkehrt:

import { useState } from "react";

export default function useToggle(startwert) {
    const [an, setAn] = useState(startwert);

    function umschalten() {
        setAn((an) => !an);
    }

    return [an, umschalten];
}

Eine Komponente ruft ihn so auf wie useState: const [infoSichtbar, infoUmschalten] = useToggle(false);. Der Hook gibt ein Array zurück, deshalb kann jede Komponente den beiden Werten ihre eigenen Namen geben.

Zwei Dinge solltest du wissen:

• Ein Hook teilt Code, keinen State. Jede Komponente, die useToggle aufruft, bekommt ihr eigenes an, genau wie bei jedem Aufruf von useState. Wenn sich das eine ändert, bleiben die anderen unberührt.
• Ein Hook ist normales JavaScript ohne JSX, deshalb endet seine Datei auf .js: useToggle.js. Du importierst ihn wie eine Komponente: import useToggle from "./useToggle.js";

Dein Hook heißt useLocalStorage(schluessel, startwert). Er funktioniert wie useState, merkt sich seinen Wert aber in localStorage unter schluessel. Die Datei useLocalStorage.js liegt bereit: Vorerst gibt der Hook nur weiter, was useState zurückgibt. Innen braucht er dieselben zwei Teile wie die Favoriten in der Lektion über Effekte, mit schluessel statt "favoriten" und startwert statt []. Der Effekt verwendet jetzt auch schluessel, seine Abhängigkeiten sind also [schluessel, wert].