El hook useRef nos permite crear una variable que mantiene una referencia a un elemento, un valor o cualquier otro dato que no afecta el renderizado del componente. Esto puede ser útil para almacenar valores mutables, acceder a elementos del DOM o preservar valores entre renderizados del componente.

Sintaxis:

Para utilizar el hook useRef, declaramos una variable (refVariable) y le asignamos el resultado de invocar useRef(). Opcionalmente, podemos proporcionar un valor inicial (initialValue) como argumento de este hook.

const refVariable = useRef(initialValue);

Nota

El valor actual puede ser accedido y actualizado usando la propiedad refVariable.current. La ventaja de useRef es que nos permite manipular estos valores sin provocar un nuevo renderizado del componente.

Ejemplo:

Creación del componente FormInput que utiliza el hook useRef para crear una referencia a un elemento de entrada y enfocar en él cuando se hace clic en un botón.

import React, { useRef } from "react";

const FormInput = () => {
  const inputRef = useRef();

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

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

En este ejemplo, el hook useRef crea una referencia llamada inputRef. Esta referencia se asigna al atributo ref del elemento input, lo que permite acceder al elemento input utilizando inputRef.current.

Explicación línea por línea:

• Línea 1: Importación del hook useRef desde la biblioteca React para aprovechar su funcionalidad;
• Línea 3: Definición del componente FormInput utilizando la sintaxis convencional de función;
• Línea 4: Inicialización de la variable inputRef usando el hook useRef, representando la referencia de entrada;
• Líneas 6-8: Esta función flecha de JavaScript gestiona la lógica al hacer clic en el botón, lo que enfoca el cursor del usuario en el campo de entrada;
• Líneas 10-15: Renderizado del marcado del componente.

1. En la línea 12, se establece la referencia utilizando el atributo ref y se asigna la variable inputRef como su valor;
2. El botón en la línea 13 utiliza el atributo onClick para especificar la función que se ejecutará al hacer clic, que en este caso es la función handleClick.

Código completo de la aplicación: