Eigene React Hooks schreiben

Seit React Version 16.8, gibt es sogenannte Hooks. Heute wollen wir uns ansehen, wie wir selbst Hooks schreiben. Folgendes sollte bekannt sein:

export const ExampleComponent = () => {
    const [wert, setWert] = useState("blabla");

    return (
        <h1>Wert aus dem Hook: {wert}</h1>
    );
}

Um selbst React Hooks zu schreiben, brauchen wir nichts besonderes. Es reicht, zu verstehen, wie Funktionale Komponenten arbeiten. Sprich, ein React Hook ist nichts anderes, als eine Funktionale Komponente, welche bei jedem Neu-Zeichnen (Rendering) neu aufgerufen wird.

Versuchen wir nun ein Hook zu schreiben, welcher sich „useCounter“ nennt. Dieser soll uns zwei Funktionen bereitstellen: increase und decrease. Sowie den aktuellen Wert.

export const useCounter = (defaultValue: number) => {
    const [value, setValue] = useState(defaultValue);
    
    const increase = setValue(value + 1);
    const decrease = setValue(value - 1);
    
    return [value, increase, decrease];
}

// Verwendung:
export const Example = () => {
    const [value, increase, decrease] = useCounter(5);
    return (
        <>
            <p>{value}</p>
            <button onClick={() => increase()}>Mehr</button>
            <button onClick={() => decrease()}>Weniger</button>
        </>
    );
}

10130cookie-checkEigene React Hooks schreibenno