Introducción

¿Para qué sirve?Ref

useRef es un gancho de React que permite crear una referencia persistente a un valor o un elemento DOM. A diferencia de useState, que se usa para administrar el estado que activa la repetición de renderizaciones, useRef se usa principalmente para efectos secundarios o para acceder a elementos DOM directamente.

¿Por qué utilizar useRef?

El gancho useRef es particularmente útil para:

• Acceder directamente a los elementos DOM: puedes usar useRef para obtener una referencia a un elemento DOM, lo que te permitirá manipularlo directamente sin activar una nueva renderización.
• Crear valores persistentes: a diferencia del estado, los valores creados con useRef persisten entre renderizaciones, lo que los hace ideales para almacenar datos que no necesitan activar nuevas renderizaciones.

Comprender el gancho useRef

El gancho useRef devuelve un objeto con la propiedad .current. cuando llamas a useRef, crea una referencia persistente al valor que pasas como argumento. Esta referencia se almacena en la propiedad .current del objeto devuelto.

Creando una referencia con useRef

Para crear una referencia simplemente llame a useRef con el valor inicial.

import { useRef} from 'react'

const App = () => {
  const countRef = useRef(0)

  return (...)
}

export default App

En el ejemplo anterior countRef es una referencia al valor inicial 0.

Accediendo al valor de referencia

Para acceder al valor de referencia simplemente llame al objeto countRef con la propiedad .current

import { useRef} from 'react'

const App = () => {
  const countRef = useRef(0)

  const increment = () => {
    countRef.current  
  }

  return (
    

      
Count: {countRef.current}
      Increment
    
  )
}

export default App

En el ejemplo anterior, si hace clic en el botón, llamará a la función de incremento que aumentará el countRef, pero el recuento no se actualizará en

Count: {countRef.current}

actualice el código al ejemplo siguiente para obtener el resultado esperado.

import { useRef, useState } from 'react'

const App = () => {
  const countRef = useRef(0)
  const [count, setCount] = useState(0)

  const increment = () => {
    countRef.current  
    setCount(countRef.current)
  }

  return (
    

      
Count: {count}
      Increment
    
  )
}

export default App

Casos de uso comunes para useRef

Acceder y manipular directamente elementos DOM

es posible utilizar el gancho useRef para acceder y cambiar las propiedades de los elementos html

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

  const handleFocus = () => {
    inputRef.current.focus()
  }

  return(
    
  )
}

Valores persistentes

A diferencia de useState o variable, useRef puede pasar valores y datos entre renderizaciones, como datos almacenados en caché o ajustes de configuración.

Optimización del rendimiento

En algunos casos, usar useRef puede ayudar con la optimización de componentes al evitar renderizaciones innecesarias. Por ejemplo, si tiene un componente que representa una lista grande de elementos, puede almacenarlo en caché usando useRef y solo modificarlo y volver a renderizar los elementos que han cambiado.

Mejores prácticas y consideraciones.

• No escribir ni leer ref.current durante el renderizado
• Puedes mutar la propiedad ref.current 
• Cuando cambias la propiedad ref.current , React no vuelve a renderizar tu componente
• La información es local para cada copia de tu componente (a diferencia de las variables externas, que se comparten). Puedes almacenar información entre renderizaciones (a diferencia de las variables regulares, que restablecer en cada renderizado).
• Puedes leer o escribir referencias de controladores de eventos o efectos en su lugar.
• Manipulación del dom con ref

Pasar una referencia a un componente personalizado.

Si intentas pasar una referencia a tu propio componente como este

const inputRef = useRef(null);

return ;

Es posible que aparezca un error en la consola:
Advertencia: No se pueden dar referencias a los componentes de la función. Los intentos de acceder a esta referencia fracasarán. ¿Querías usar React.forwardRef()?

Para resolver este problema, ajuste el componente personalizado con forwardRef así:

const inputRef = useRef(null);

return ;

Componente personalizado:

import { forwardRef } from 'react';

const MyInput = forwardRef(({ value, onChange }, ref) => {
  return (
    
  );
});

export default MyInput;

Conclusión

useRef es un potente gancho que se utiliza principalmente para el uso de efectos secundarios, como el almacenamiento en caché de datos entre renderizaciones o el acceso a elementos del DOM. Es una gran herramienta para optimizar el rendimiento y lograr funcionalidades específicas en la aplicación React.