Vlastní hook

V lekci Efekty jste zařídili, aby oblíbené vydržely: useState s funkcí, která čte z localStorage, a efekt, který do něj ukládá. Teď má aplikace i poznámky a ty mají vydržet také. Mohli byste ty řádky zkopírovat do Poznamky.jsx a změnit klíč. React ale umí něco lepšího: napište je jednou, do vlastní funkce, a zavolejte ji z obou komponent.

Taková funkce je váš vlastní hook: funkce, jejíž název začíná na use a která volá jiné hooky. Tady je jeden malý. Drží true, nebo false, a vrací tuto hodnotu spolu s funkcí, která ji přepne:

import { useState } from "react";

export default function usePrepinac(vychoziHodnota) {
    const [zapnuto, setZapnuto] = useState(vychoziHodnota);

    function prepni() {
        setZapnuto((zapnuto) => !zapnuto);
    }

    return [zapnuto, prepni];
}

Komponenta ho volá stejně jako useState: const [ukazInfo, prepniInfo] = usePrepinac(false);. Hook vrací pole, takže každá komponenta dá oběma hodnotám vlastní názvy.

Tři věci, které je dobré vědět:

• Hook sdílí kód, ne stav. Každá komponenta, která volá usePrepinac, dostane vlastní zapnuto, stejně jako každé volání useState. Když se jedno změní, ostatní ne.
• Hook je obyčejný JavaScript bez JSX, takže jeho soubor má příponu .js: usePrepinac.js. Importujete ho stejně jako komponentu: import usePrepinac from "./usePrepinac.js";
• Název hooku je use a to, co hook dělá. usePrepinac má proto český název, stejně jako ostatní vaše funkce. Hook postavený na něčem z prohlížeče si ale nechává jeho anglický název: useLocalStorage pracuje s localStorage a useFetch z dalšího cvičení s fetch(). Pod stejnými názvy je najdete i v hotových knihovnách.

Váš hook bude useLocalStorage(klic, vychoziHodnota). Funguje jako useState, ale svou hodnotu si pamatuje v localStorage pod klíčem klic. Soubor useLocalStorage.js je připravený: zatím hook jen předává dál, co vrátí useState. Uvnitř potřebuje stejné dvě části jako oblíbené v lekci Efekty, s klic místo "oblibene" a vychoziHodnota místo []. Efekt teď používá i klic, takže jeho závislosti jsou [klic, hodnota].