Lekce 7 - Hooky v Reactu - useContext() a useReducer()

V předchozí lekci, Hooky v Reactu - useCallback() a useMemo(), jsme si představili hooky useCallback() a useMemo() a ukázali jsme si jejich využití v praxi společně s funkcí memo().

V následujícím tutoriálu pokročilého Reactu si představíme hooky useContext() a useReducer(). Zaměříme se na jejich společné použití. Toto spojení je výhodné, protože poskytuje efektivní a udržitelný způsob správy globálního stavu a logiky aplikace bez nutnosti prop drillingu nebo složitého stavového managementu.

Prop drilling je termín používaný k popisu procesu, kdy se data předávají jako props přes několik úrovní vnořených komponent, aby dosáhla těch, které je skutečně potřebují. Tento proces je často neefektivní a způsobuje zbytečnou složitost aplikace, zvláště když se data musí předat přes mnoho úrovní komponent.

Hook useContext()

Hook useContext() umožňuje komponentě přistupovat k hodnotám kontextu, které jsou poskytnuty výše v komponentovém stromu. V praxi to znamená, že nemusíme hodnoty nebo funkce používané na mnohých místech aplikace posouvat přes několik komponent pomocí props, aby nedošlo k prop drillingu. Namísto toho je sdílíme přes kontext.

Kontext musíme nejdříve vytvořit a uložit do proměnné:

const MyContext = React.createContext();

Kdybychom do závorky funkce createContext() uvedli nějakou hodnotu, bude braná za výchozí pouze v případě, že v kontextu výše ve stromu komponent není odpovídající hodnota poskytnuta.

Pak obalíme komponentu, ve které chceme kontext využít, takzvaným providerem:

...konec náhledu článku...
Pokračuj dál