useRef es un hook de React que te permite crear una referencia que durará a lo largo del ciclo de vida de un componente. Es util para guardar elementos que quieras volver a utilizar como un id, un contador o un elemento del DOM. La diferencia es que cuando el valor cambia, no se renderiza el componente de nuevo, a diferencia del useState. Ademas, no necesariamente el valor cambia cuando se vuelve a renderizar el componente.
Este es el uso mas clásico del useRef. Sería algo asi:
Supongamos que tenemos un input donde buscamos peliculas
<input type="text" id="movie-name" placeholder='Licorice Pizza, Everything Everywhere All At Once...' />
Dentro de la app debemos crear una constante que contenga el useRef
const inputRef=useRef()
Con el useRef declarado, lo debemos mencionar dentro del input con el atributo ref
<input ref={inputRef} type="text" id="movie-name" placeholder='Licorice Pizza, Everything Everywhere All At Once...' />
Una vez que lo referenciamos, debemos crear un event handler para recuperar el dato que queremos guardar. Para eso creamos la funcion handleInput que va a recuperar el valor del input con el atributo current
const handleClick=()=>{
const value=inputRef.current.value;
}
<input ref={inputRef} onClick={handleClick} type="text" id="movie-name" placeholder='Licorice Pizza, Everything Everywhere All At Once...' />
Ahora vas a guardar cada dato que se ingrese en ese input cada vez que hagas click. Es una forma de poder obtener info del DOM como lo hacias en JavaScript vanilla.