React Hooks – New Stuff for Cool Kids
Zaznamenali jste v posledních dnech/týdnech ten obrovskej bum okolo React Hooks? Pokud jste stejní nadšenci jako my a hned jste zkoukli talk (historicky první na React Confu) Dana Abramova, tak se v dalším textu nejspíš nic novýho nedozvíte. Naopak, pokud jste o tom zatím neslyšeli, nebo jste jen neměli čas a náladu se tomu detailněji věnovat – tenhle článek by vás mohl zajímat.
Proč vůbec vznikly tyhle "hooky"?
Už je to asi 5 let co píšu reactí appky a za tu dobu, stejně asi jako většina z vás, jsem narazil na spousty různých problémů. Ve facebooku si toho asi konečně všimli taky, a tak tyto problémy pěkně shrnuli a popsali, za účelem motivace vývojářů v použití téhle nové featury.
Sdílení stateful logiky napříč komponentami
Jak je známo, tak React sám o sobě nenabízí žádnou možnost vytvoření sdílené logické části komponenty (např. připojení ke storu...), tudíž to obcházíme jinými známými způsoby - použitím HOC (high order component) či render props patternem. Tyto přístupy nám dovolí přesně to, co potřebujeme, ale neobejdeme se bez side effectů, jako je např. drsnější křivka učení, těžší sjednocování kódu v týmu, typický "wrapper hell" uvnitř React Devtools, kde jsou komponenty všemožně obalovány. Neříkám, že je to něco, přes co nejede vlak, ale React by přeci jen mohl nabídnout jednodušší řešení.
Použitím React Hooks jste schopni psát znovu použitelné logické části komponent, které nemění hierarchii komponent napříč aplikací a navíc jsou jednoduše testovatelné.
Obří, komplexní, nepochopitelné komponenty
Abyste mohli pracovat se stavy komponent, nezbývá vám než vytvářet mnohořádkové stateful komponenty, ve kterých se používají lifecycle metody (componentDidMount, componentWillUnmount) typicky pro fetchování dat, změnu UI prvků atp. a vývojáři většinou nechtějí daný problém dělit do menších celků právě z důvodu sdíleného stavu/logiky.
Komplexní komponenty jsou nejen složité pro testování, ale mohou vést k zahlazení nejrůznějších malých bugů, právě z důvodu nepřehlednosti. Typicky se tohle stává uvnitř několikačlenných týmů, kde u tak komplexního kódu býva zpravidla více názorů jak problém řešit.
Jak si ukážeme pak dále, React Hooks a konkrétně Effect Hook tenhle problém brilantně řeší možností rozdělení komplexního problému do malých funkcí, kterým nabízí přístup k lokálnímu stavu.
Pochopení Class komponent
Já konkrétně nepovažuji tohle za až tak úplně velký problém, ale tvůrci Reactu poukazují na problémy v pochopení jak fungují Classy, bindování event handlerů či jak v javascriptu funguje kouzelné slovíčko this. S tím také souvisí různorodost názorů, kdy použít funkce, kdy použít Class komponenty atp.
A právě React Hooks nabízejí použití Reactích featur i bez nutnosti použití Class komponent. I přes to ale hlásají, že do budoucna nejsou žádné plány odstraňovat Class komponenty, takže nepřepisujte své kódy a buďte klidní.
První krůčky s React Hooks
Jak už jsem trochu nakousl výše, Hooky jsou nová featura přímo z dílny Reactu, která nám dovoluje pracovat se stavem komponent bez nutnosti použití Class komponent. Momentálně jsou součástí React v16.7.9-aplha. A co víc? Jsou zpětně kompatibilní, React Hooks si také můžete vyzkoušet klidně jen v části aplikace bez nutnosti přepisování stávajícího kódu.
State Hook
V následujícím příkladu demonstruju použítí "useState" (State Hook) v jednoduché aplikaci, která má za úkol jen dynamicky měnit počasí při kliku na tlačítko.
V tomto konkrétním příkladu právě klíčová funkce useState je Hook, jejíž argument popisuje počáteční stav. Můžeme ho využívat k připojení lokálního stavu do primitivní komponenty a můžeme ho využívat pro různé stavy kolikrát chceme. Poskytuje současný stav (v tomto případě třeba weather) a dále funkci, která umožňuje stav měnit (v tomto případě setWeather). Přístup je velmi podobný známému this.state s tím rozdílem, že funkce setWeather nahrazuje předchozí stav novým stavem.
Effect Hook
Představte si modelovou situaci, kdy chceme např. natáhnout data z API, či manuálně změnit DOM z komponenty ještě předtím, než se komponenta vyrenderuje. Typicky bychom použili některou z metod componentDidMount či componentDidUpdate. Jak tohle elegantně řešit pomocí Effect Hooku si ukážeme v následujícím příkladu.
Effect Hook, konkrétně funkce useEffect nám dovoluje vytváření tzv. side effectů (zde fetchování dat z Yahoo Weather API) a zároveň nám nabízí možnost, uklidit po sobě nepořádek (pokud jsme nějaký způsobili :)). Návratová funkce, která je v Hooku definovaná se zavolá tehdy, když je komponenta připravena k úklidu (lehce přirovnatelné k lifecycle metodě componentWillUnmount).
Stějně jako State Hook je možné používat useEffect vícekrát, jak můžete vidět v ukázce.
Další Hooky
Mezi další zatím známé Hooky patří useContext, který dovoluje přístup k React contextu aplikace, useReducer, který slouží jako alternativa k useState, s rozdílem, že přijíma stav a akci, či useRef, umožňující přístup ke konkrétním elementům.
Závěrem
React Hooks jsou experimentální featury, nabízející zejména rozhraní pro použití a dynamickou změnu lokálního stavu v jednoduchých komponentách bez nutnosti použití tříd, a pro vyvolávání tzv. "side effectů" uvnitř komponenty ještě před jejím samotným vyrenderováním.
Ještě bude nějakou chvíli trvat, než se Hooky stanou plnohodnotnou součástí našich aplikací, proto bych zde rád vypíchnul to slovíčko "experimentální". Samosebou zůstaňte dál touto featurou nadšeni jako my, ale nepospíchejte hned domů přepisovat své aplikace, protože nikdy nevíte, co přijde zítra. :)
Zdroje:
