Pravidla hooků

Ještě jeden vlastní hook: useFetch(adresa) načte soubor stejně jako efekty v lekci Efekty a vrátí objekt se třemi hodnotami, { data, nacitani, chyba }. Program.jsx ho už používá: ukazuje Načítám program…, chybu, nebo kapely. Zatím má ale useFetch.js jen tři stavové proměnné a nic se nenačítá.

Než ho dokončíte, tady jsou pravidla, která platí pro všechny hooky, ty od Reactu i ty vaše:

1. Hooky volejte jen na nejvyšší úrovni komponenty nebo vlastního hooku: ne uvnitř if, cyklu, obsluhy události ani jiné funkce. Volejte je při každém vykreslení komponenty, vždy ve stejném pořadí.
2. Hooky volejte jen z komponent a z jiných hooků, nikdy z obyčejných funkcí.
3. Názvy hooků začínají na use. Podle toho React i další nástroje poznají, že je funkce hook a že pro ni platí tato pravidla.

Proč na pořadí záleží? React nezná stavové proměnné komponenty podle názvů. Ví jen, že komponenta zavolala useState poprvé, podruhé, potřetí, a jejich hodnoty si od jednoho vykreslení k dalšímu drží v tomto pořadí. Když se nějaký hook volá jen někdy, pořadí se změní a React nepozná, která hodnota patří kam. Proto skončí chybou.

Přesně to se děje v Novinky.jsx. Dokud novinky nejsou otevřené, komponenta skončí předčasným návratem už po jednom hooku. Jakmile se otevřou, dostane se dál a zavolá i useFetch, který má další tři. Klikněte na Ukázat novinky a celá stránka zmizí. Konzole řekne proč:

React has detected a change in the order of Hooks called by Novinky. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://react.dev/link/rules-of-hooks

   Previous render            Next render
   ------------------------------------------------------
1. useState                   useState
2. undefined                  useState
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

Error: Rendered more hooks than during the previous render.
    at useFetch (useFetch.js:4)

Tabulka porovnává obě vykreslení komponenty Novinky: v předchozím žádný druhý hook nebyl (undefined), v tomto je to useState. Chyba pak ukazuje řádek, kde si toho React všiml: první useState v useFetch.

Oprava: nejdřív zavolejte všechny hooky a předčasný návrat dejte až za ně. Když má efekt svou práci udělat jen někdy, dejte if dovnitř efektu, ne kolem něj.