Kdy se efekt spouští

Efekt, který dostane jen funkci, se spustí po každém vykreslení, i po takovém, které s ním nemá nic společného. Aplikace v tomto cvičení má navíc textové pole pro jméno na vstupence. Každá napsaná klávesa změní stav, React komponentu vykreslí znovu a efekt znovu nastaví titulek, přestože se lajky nezměnily. U titulku je to jen trocha práce navíc. Efekt, který načítá data nebo spouští časovač, se ale nesmí spustit s každou klávesou.

Proto useEffect bere ještě druhý argument: pole závislostí, tedy hodnot, na kterých efekt závisí. Po každém vykreslení je React porovná s jejich hodnotami z minulého vykreslení a efekt spustí, jen když se některá z nich změnila:

useEffect(() => {
    console.log("Po každém vykreslení");
});

useEffect(() => {
    console.log("Jednou, když se komponenta objeví");
}, []);

useEffect(() => {
    console.log("Na začátku a vždy, když se změní lajky");
}, [lajky]);

• Bez pole se efekt spustí po každém vykreslení.
• S prázdným polem [] není nic, co by se mohlo změnit, takže se spustí jen po prvním vykreslení, když se komponenta objeví na stránce.
• S [lajky] se spustí po prvním vykreslení a pak po každém vykreslení, ve kterém se lajky změnily. S [lajky, jmeno], když se změní kterákoli z nich.

Jaké závislosti efekt potřebuje? Každou stavovou proměnnou a každou hodnotu z props, kterou používá. Efekt, který nastavuje titulek podle lajky, má závislosti [lajky]. Když některou vynecháte, efekt se při její změně nespustí a stránka dál ukazuje starou hodnotu.