Desafortunadamente, useRef está subestimado. No se encuentra entre los anzuelos más populares, pero es beneficioso. Saber cómo y dónde usarlo puede lograr grandes resultados.

Empecemos con lo básico

useRef es un React Hook que te permite hacer referencia a un valor que no es necesario para la renderización.

React recordará el valor que creas mediante useRef, ya sea que estés creando un objeto JavaScript que haga referencia a un nodo en el DOM o un valor simple, y no se perderá durante las re-renderizaciones.

¿Qué nos aporta?

1. Accediendo a elementos DOM:

   • Puedes acceder fácilmente a elementos en el DOM. Por ejemplo, puede obtener el valor de un campo de entrada, centrarse en elementos específicos, obtener su alto y ancho, desplazarse a una parte particular de la pantalla y más.

2. Almacenamiento de valores mutables:

   • Puedes recordar cualquier dato que necesites sin volver a renderizar los componentes. Por ejemplo, si necesita un contador o un temporizador, elija useRef en lugar de useState.

Ejemplos

Aquí hay algunos ejemplos para ilustrar el poder del usoRef.

Ejemplo 1: referencia a un número

import React, { useRef } from 'react';

const Counter = () => {
  const refCount = useRef(0);
  const refInputField = useRef(null);

  const onClick = () => {
    refCount.current = refCount.current   1;
    refInputField.current.focus();
  }

  return (
    
      
        Click me!
      
      
    >
  );
};

export default Counter;

En este ejemplo:

• refCount es una referencia mutable a un número.
• refInputField es una referencia a un elemento de entrada.
• Cuando se hace clic en el botón, el contador aumenta y el campo de entrada gana foco.

Ejemplo 2: realizar un seguimiento de los valores anteriores

Otro caso de uso común para useRef es realizar un seguimiento de los valores anteriores.

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

const PreviousValue = () => {
  const [count, setCount] = useState(0);
  const prevCountRef = useRef();

  useEffect(() => {
    prevCountRef.current = count;
  }, [count]);

  return (
    

      
Current Count: {count}
      
Previous Count: {prevCountRef.current}
       setCount(count   1)}>Increment
    
  );
};

export default PreviousValue;

En este ejemplo:

• prevCountRef realiza un seguimiento del valor anterior del recuento.
• El gancho useEffect actualiza prevCountRef.current cada vez que cambia el recuento.
• Esto le permite mostrar los recuentos actuales y anteriores sin activar re-renderizaciones innecesarias.

Consejos y trucos avanzados con useRef

1. Valores persistentes en todos los renderizados

useRef se puede usar para conservar valores en las renderizaciones sin provocar una nueva renderización, a diferencia de useState. Esto es particularmente útil para almacenar valores que no afectan directamente a la interfaz de usuario pero que deben recordarse.

Ejemplo: seguimiento del recuento de renderizado de un componente.

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

const RenderCounter = () => {
  const renderCount = useRef(0);

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

  return (
    

      
This component has rendered {renderCount.current} times
    
  );
};

export default RenderCounter;

2. Integración con bibliotecas de terceros

useRef es invaluable cuando se trabaja con bibliotecas de terceros que requieren manipulación directa de elementos DOM, como la integración con bibliotecas de gráficos, administración de reproductores de video o manejo de animaciones.

Ejemplo: integración de una biblioteca de gráficos.

import React, { useRef, useEffect } from 'react';
import Chart from 'chart.js/auto';

const ChartComponent = () => {
  const chartRef = useRef(null);

  useEffect(() => {
    const ctx = chartRef.current.getContext('2d');
    new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['January', 'February', 'March', 'April'],
        datasets: [{
          label: 'Sales',
          data: [65, 59, 80, 81],
        }],
      },
    });
  }, []);

  return ;
};

export default ChartComponent;

3. Evitar rerenderizaciones innecesarias en aplicaciones complejas

En aplicaciones complejas donde el rendimiento es crítico, usar useRef para almacenar objetos mutables puede ayudar a evitar re-renderizaciones innecesarias.

Ejemplo: almacenar un objeto de estado mutable.

import React, { useRef } from 'react';

const MutableState = () => {
  const state = useRef({
    name: 'John Doe',
    age: 30,
  });

  const updateName = (newName) => {
    state.current.name = newName;
    console.log('Name updated:', state.current.name);
  };

  return (
    

       updateName('Jane Doe')}>
        Update Name
      
    
  );
};

export default MutableState;

4. Evitar problemas de cierre

El uso de useRef puede ayudar a evitar problemas de cierre al proporcionar una referencia estable a un valor que persiste en todos los renderizados.

Ejemplo: Temporizador con useRef para evitar el estado obsoleto.

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

const Timer = () => {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);
  countRef.current = count;

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(countRef.current   1);
    }, 1000);
    return () => clearInterval(intervalId);
  }, []);

  return 
Count: {count}
;
};

export default Timer;

Conclusión

Los ganchos son geniales y deberías usarlos. Puedes lograr mucho si comprendes cómo funciona React y aplicas los ganchos correctamente. useRef es particularmente poderoso para:

• Acceder y manipular elementos DOM.
• Almacenamiento de valores mutables que no activan re-renderizados.
• Valores persistentes en los renderizados.
• Integración con bibliotecas de terceros.
• Evitar rerenderizaciones innecesarias en aplicaciones complejas.
• Mitigación de problemas de cierre.

Al comprender y utilizar useRef, puede escribir componentes de React más eficientes y efectivos. El verdadero poder de los ganchos radica en comprender su comportamiento y aplicarlos con criterio.

¿Sabes que useState no siempre es la respuesta correcta?