Refy w React

Jeśli chcemy zapamiętać jakąś informację, ale nie chcemy, aby jej zmiana powodowała renderowanie komponentu, to przydadzą nam się refy i odpowiednio hook useRef, który z nimi działa.

Ref (lub referencja) to zwykły JavaScriptowy obiekt z jedyną właściwością current, którą możesz odczytywać lub zmieniać.

Podobnie jak stany, refy mogą przechowywać dowolny typ danych - mogą to być liczby, stringi, obiekty, a nawet funkcje.

Jeśli twoje dane są używane do renderowania, to przechowuj je w stanie, a jeśli nie potrzebujesz renderowania, w takim przypadku użycie refów może okazać się bardziej efektywne. Co więcej, w przeciwieństwie do stanu wartość refa zmienia się natychmiast.

Ogólnie refy stosuje się tam, gdzie trzeba odstąpić od Reacta i współdziałać z zewnętrznymi API - najczęściej z przeglądarkowymi, które nie wpływają na wyświetlanie komponentu. To może być na przykład przechowywanie id timera lub przechowywanie obiektu, dla którego nie trzeba obliczać JSX, ale najczęściej jest to współdziałanie z elementami DOM. Można je stosować do zarządzania fokusem, zaznaczania tekstu lub odtwarzania multimediów.

W następnej lekcji przeanalizujemy pracę z refami i hookiem useRef w praktyce.