Uso del hook useRef en React

El hook useRef es una función proporcionada por React, que se utiliza para interactuar directamente con un elemento del DOM en un componente React. El valor de useRef persiste durante toda la vida útil del componente, por lo que es muy útil cuando necesitamos un valor que persista a través de las renderizaciones pero que no provoque una nueva renderización al cambiar.

Ejemplo Práctico

Supongamos que tiene un componente de ingreso de texto y desea acceder al valor del texto. Puede hacerlo utilizando useRef. Primero, deberá crear una referencia utilizando useRef y luego adjuntarla al componente de entrada.

import React, { useRef } from 'react';

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

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

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>Focus the input</button>
    </div>
  );
}

export default TextInput;

Aquí, inputRef es una referencia al elemento de entrada. Al hacer clic en el botón, ejecutamos la función focusInput, que enfoca el elemento de entrada. En este caso, inputRef.current se refiere al elemento DOM al que está adjunta la referencia.

Mejores Prácticas

El uso de useRef puede ser tentador para preservar cualquier tipo de dato mutable, pero hay que tener en cuenta que no es su propósito principal. En muchas situaciones, useState o useReducer podrían ser una mejor elección ya que están diseñados para manejar el estado del componente y provocarán una nueva renderización cuando el estado cambie.

Además, si bien useRef puede ser útil para interactuar directamente con elementos del DOM, React anima a los desarrolladores a trabajar con los datos, no con el DOM directamente. Por lo tanto, el uso de useRef para manipular directamente los elementos del DOM debería ser una excepción y no la norma.

En conclusión, el hook useRef de React es una poderosa herramienta que nos permite interactuar directamente con los elementos del DOM y mantener las referencias persistentes durante toda la vida útil del componente. Sin embargo, debe usarse con prudencia para evitar caer en anti-patrones o prácticas desaconsejadas.