Refy v Reactu

Pokud chceme zapamatovat nějakou informaci, ale nechceme, aby její změna vyvolala renderování komponentu, pak se nám budou hodit refy a odpovídající hook useRef, který s nimi pracuje.

Ref (neboli reference) je obyčejný JavaScriptový objekt s jedinou vlastností current, kterou můžete číst nebo měnit.

Stejně jako stavy mohou refy ukládat jakýkoli typ dat - mohou to být čísla, řetězce, objekty a dokonce i funkce.

Pokud jsou vaše data použita pro renderování, pak je ukládejte do stavu, a pokud nepotřebujete renderování, v takovém případě může být použití refů efektivnější. Navíc na rozdíl od stavu se hodnota refu mění okamžitě.

Obecně se refy používají tam, kde je třeba ustoupit od Reactu a interagovat s externími API - nejčastěji s prohlížečovými, které neovlivňují zobrazení komponentu. Může to být například ukládání id timeru nebo ukládání objektu, pro který není potřeba vypočítávat JSX, ale nejčastěji jde o interakci s DOM elementy. Lze je použít pro ovládání focusu, výběru textu nebo přehrávání médií.

V příští lekci si probereme práci s refy a hookem useRef v praxi.