React ofrece varios hooks que facilitan la creación de componentes con estados y efectos. Uno de estos hooks es useRef. Este hook permite crear una referencia mutable que persiste durante todo el ciclo de vida del componente sin provocar un nuevo render cuando su valor cambia. En este artículo veremos de forma práctica cómo funciona useRef y de qué manera puede resultar útil en distintos escenarios.

¿Qué es useRef y para qué se utiliza?

El hook useRef devuelve un objeto con una propiedad llamada current que se puede utilizar para:

• Referenciar un elemento del DOM, permitiendo acceder a él directamente.
• Almacenar valores que se mantienen entre renderizados sin provocar que el componente se actualice.

Al contrario de usar useState, las modificaciones en current no generan un re-render, lo que puede ser ventajoso en ciertas situaciones.

Uso de useRef para referenciar elementos del DOM

Uno de los usos más comunes de useRef es acceder a un elemento HTML dentro del componente. Por ejemplo, para enfocar un campo de entrada al hacer clic en un botón, se puede hacer lo siguiente:

import React, { useRef } from 'react';

function EjemploInput() {
  const inputRef = useRef(null);

  const enfocarInput = () => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="Escribe algo..." />
      <button onClick={enfocarInput}>Enfocar input</button>
    </div>
  );
}

export default EjemploInput;

En este ejemplo, inputRef se asigna al elemento <input>. Al ejecutar la función enfocarInput, se utiliza la propiedad current para acceder y modificar directamente el DOM.

Uso de useRef para almacenar valores persistentes

Además de referenciar elementos, useRef es útil para conservar valores entre renderizados. Por ejemplo, puede utilizarse para contar cuántas veces se ha renderizado un componente sin afectar el proceso de renderizado:

import React, { useRef, useEffect } from 'react';

function ContadorRender() {
  const renderCount = useRef(0);

  useEffect(() => {
    renderCount.current += 1;
  });

  return (
    <div>
      <p>El componente se ha renderizado {renderCount.current} veces.</p>
    </div>
  );
}

export default ContadorRender;

En este caso, el valor de renderCount.current se incrementa en cada render, pero su cambio no ocasiona que el componente se vuelva a renderizar, ya que no forma parte del estado.

Consideraciones y buenas prácticas

• Uso prudente: Utiliza useRef cuando necesites acceder a elementos del DOM o almacenar valores que no requieran un nuevo render al actualizarse.
• Diferencias con useState: A diferencia del estado, actualizar current no provoca una actualización visual del componente. Esto lo hace adecuado para casos en los que se necesita persistencia sin afectar la interfaz.
• Legibilidad del código: Es recomendable nombrar la referencia de forma que quede claro su propósito, por ejemplo, inputRef para referenciar un campo de entrada.

Conclusión

El hook useRef ofrece una manera práctica de interactuar con el DOM y mantener valores persistentes a lo largo de los renderizados sin interferir en el ciclo de vida visual del componente. Aunque no es la herramienta indicada para gestionar cambios que afecten la interfaz, su aplicación en tareas como enfocar elementos o almacenar contadores internos resulta muy útil.