Refs a React-ben

Ha szeretnénk valamilyen információt megjegyezni, de nem szeretnénk, hogy a változása komponens újrarajzolást idézzen elő, akkor ref-ek és ennek megfelelően a useRef hook jön jól, amely velük dolgozik.

A ref (vagy hivatkozás) egy közönséges JavaScript objektum, amelynek egyetlen current tulajdonsága van, amelyet olvasni vagy módosítani lehet.

Akárcsak az állapotok, a ref-ek is tárolhatnak bármilyen típusú adatot - ez lehet szám, string, objektum, sőt még függvény is.

Ha az adataid a megjelenítéshez használatosak, akkor tárold őket állapotban, ha viszont nincs szükséged újrarajzolásra, ilyen esetben a ref-ek használata hatékonyabb lehet. Ráadásul az állapottal ellentétben a ref értéke azonnal megváltozik.

Általában a ref-ek ott kerülnek alkalmazásra, ahol a React-tól eltérve külső API-kkal kell együttműködni - leggyakrabban böngészős API-kkal, amelyek nem befolyásolják a komponens megjelenését. Ez lehet például egy id tárolása időzítőhöz vagy egy olyan objektum tárolása, amelyhez nincs szükség JSX kiszámítására, de legtöbbször a DOM elemekkel való interakcióról van szó. Használhatók fókuszvezérlésre, szövegkiemelésre vagy média lejátszására.

A következő leckében gyakorlatban részletezzük a ref-ek és a useRef hook használatát.