Aplikace si pamatuje

Spusťte kód znovu a všechno, co jste označili, je pryč: stav žije, jen dokud aplikace běží. Aby vydržel, potřebujete localStorage a hook na to už máte z lekce Refy a vlastní hooky. Je v souboru useLocalStorage.js:

export default function useLocalStorage(klic, vychoziHodnota) {
    const [hodnota, setHodnota] = useState(() => {
        const ulozena = localStorage.getItem(klic);
        return ulozena === null ? vychoziHodnota : JSON.parse(ulozena);
    });

    useEffect(() => {
        localStorage.setItem(klic, JSON.stringify(hodnota));
    }, [klic, hodnota]);

    return [hodnota, setHodnota];
}

Používá se stejně jako useState a vrací stejnou dvojici: hodnotu a funkci, která ji mění. Navíc začne tím, co je uložené pod klíčem klic, pokud tam něco je, a hodnotu po každé změně znovu uloží. Stačí tedy změnit jediný řádek: z useState([]) se stane useLocalStorage("naucene", []). Je to hook, takže patří na začátek komponenty App k ostatním hookům.

Vlastní slovíčka by měla vydržet taky. Neukládejte ale celé slovicka: aplikace je při každém spuštění načte ze souboru slovicka.json a efekt by uložená slovíčka stejně přepsal. Vlastní slovíčka si proto držte ve vlastním stavu, uloženém pomocí useLocalStorage("vlastniSlovicka", []), a balíček z obojího složte při vykreslení:

const balicek = [...slovicka, ...vlastniSlovicka];

Balíček není stav, spočítá se, stejně jako skóre. Musí být až za kontrolou null, protože dokud slovíčka nepřijdou, skončilo by ...slovicka chybou. Pod ním pak kartička, pozice, skóre i jdiDal() pracují s balicek místo slovicka.