Váš první efekt

Vaše komponenty zatím dělaly jedinou věc: vracely, jak má stránka vypadat. React komponentu zavolá, vezme si její JSX a dá ho na stránku. Tomu se říká vykreslení a děje se znovu pokaždé, když se změní stav komponenty.

Aplikace ale dělá i věci, které nejsou JSX: změní titulek na kartě prohlížeče, spustí časovač, načte data ze serveru nebo něco uloží do localStorage. To všechno se děje mimo React a React chce, aby vykreslení jen zjistilo, jak má stránka vypadat. Takové věci proto patří do efektu: kódu, který React spustí, až komponentu vykreslí a stránka výsledek ukazuje.

Efekt napíšete pomocí useEffect. Je to hook stejně jako useState: funkce Reactu, jejíž název začíná na use a kterou voláte na začátku komponenty. Dáte jí funkci a React tu funkci zavolá, když komponentu vykreslí:

import { useEffect, useState } from "react";

export default function App() {
    const [vstupenky, setVstupenky] = useState(1);

    useEffect(() => {
        document.title = `Vstupenky: ${vstupenky}`;
    });

    return (
        <button onClick={() => setVstupenky((vstupenky) => vstupenky + 1)}>
            Vstupenky: {vstupenky}
        </button>
    );
}

document.title je text na kartě prohlížeče, který na začátku nastaví <title> v index.html. Stane se tohle:

1. React vykreslí App a stránka ukáže tlačítko s textem Vstupenky: 1.
2. Pak React spustí efekt a na kartě je také Vstupenky: 1.
3. Kliknutí změní stav. React vykreslí App znovu s dvojkou a potom znovu spustí efekt, který nastaví nový titulek.

Efekt vždy vidí hodnoty z vykreslení, po kterém se spustil, takže titulek a tlačítko ukazují totéž.

Náhled vlastní kartu nemá, takže tam titulek neuvidíte. Abyste viděli, kdy se efekt spouští, vypište v něm něco pomocí console.log(): konzole pod stránkou pak pokaždé ukáže nový řádek.

Typické chyby:

• Zapomenutý import useEffect: stránka zůstane prázdná a konzole hlásí ReferenceError: useEffect is not defined.
• Změna titulku přímo v komponentě, mimo efekt. Může to vypadat, že to funguje, ale děje se to ve chvíli, kdy React teprve zjišťuje, jak má stránka vypadat, ještě než cokoli ukáže. Změny mimo React patří do efektu.