React: Do czego służy useRef?

Czym jest useRef?

useRef to hook, który pozwala na stworzenie obiektu, którego referencja jest stała. Nawet wtedy, gdy komponent jest renderowany na nowo. Dodatkowo zmiana wartości obiektu zwróconego przez ten hook nie powoduje przerysowania komponentu.

Składnia:

const ref = useRef(some-value);

useRef przyjmuje jeden parametr. Jest to początkowa wartość, jaką będzie przechowywać stworzona referencja. Zwracany jest obiekt, który zawiera właściwość: current. Ta właściwość przechowuje wartość, którą podaliśmy przy wywołaniu useRef.

Do czego użyć useRef?

Użycie tego hook'a jest przydatne kiedy potrzebujesz przechować jakieś informacje, które nie będą wyświetlane na ekranie. Może to być na przykład ID timer'a itp.

Drugim przypadkiem, kiedy możemy wykorzystać useRef jest, gdy potrzebujemy robić jakieś zmiany w DOM. Przy użyciu tego hook'a tworzymy referencję do danego elementu i mamy do niego dostęp.

Przykłady użycia useRef

Przykład 1

import React, { useRef } from 'react';

const App = () => {
    const counter = useRef(0);

    const handle = () => {
        counter.current++;
        console.log(`Button was clicked ${counter.current} times!`);
    }
    return (
        <>
            <button onClick={handle}>Click me</button>
        </>
    );
}

Przykład 2

import React, { useRef } from 'react';

const App = () => {
    const inputRef = useRef();

    useEffect(() => {
        inputRef.current.focus();
    }, [])
    
    return (
        <>
            <input type="text" ref={inputRef} />
        </>
    );
}