Shrnutí

V této lekci jste se naučili, že:

• Efekt je kód, který React spustí, až vykreslí komponentu, a slouží pro věci mimo React: titulek karty, časovače, načítání dat, localStorage. Napíšete ho pomocí useEffect(() => { ... }, [zavislosti]), importovaného z "react" stejně jako useState.
• Závislosti určují, kdy se efekt spustí: bez pole po každém vykreslení, s [] jednou, když se komponenta objeví, s [den] na začátku a pokaždé, když se den změní. Patří do nich každá stavová proměnná a každá hodnota z props, kterou efekt používá.
• Funkce, kterou efekt vrátí, je jeho úklid. React ji zavolá, když komponenta zmizí, a předtím, než efekt spustí znovu. Interval ho potřebuje: return () => clearInterval(id);, tedy funkci, ne hned zavolané clearInterval(id).
• Interval vytvořený při prvním vykreslení si drží hodnoty z tohoto vykreslení, a tak stav mění aktualizační funkcí: setSekundy((sekundy) => sekundy + 1).
• Data se načítají v efektu, ve funkci async, kterou efekt zavolá. Data, nacitani a chyba ve stavu říkají stránce, co má ukázat, a odpoved.ok říká, jestli server soubor poslal.
• Když si má aplikace stav zapamatovat, uložte ho v efektu, který na něm závisí, a načtěte ho funkcí předanou useState, kterou React zavolá jen pro první vykreslení.

V další lekci, Miniprojekt: Stopky, postavíte stopky, jejichž interval běží v efektu: spustí se, zastaví, vrátí se na nulu a měří kola.

Nejdřív si ale vše procvičte na programu festivalu s výběrem pódia, který načte kapely ze souboru a zapamatuje si vybrané pódium.