React forwardRef & useRef | Guía para aprender a utilizarlos

Antonio Rodríguez — Sat, 27 Jul 2024 16:16:39 +0000

React forwardRef y useRef, son funciones nativas de React que nos permiten manejar referencias a nodos del DOM y otros valores de una manera más eficiente. Vamos a ver qué son, cómo funcionan y por qué son útiles.

¿Qué es React.forwardRef?

Es una función que permite pasar referencias (refs) a componentes funcionales en React. Esto es útil cuando necesitamos que un componente padre acceda directamente al DOM de un componente hijo.

Ejemplo sin forwardRef:

Veamos un ejemplo rápido sin forwardRef. Supongamos que tenemos un componente de botón y queremos que el componente padre pueda enfocar ese botón.

const Button = ({ children }) => {
  return <button>{children}</button>;
};

const App = () => {
  const buttonRef = useRef(null);
  return <Button ref={buttonRef}>Click Me</Button>;
};

En este código, el componente Button no recibe la referencia ref correctamente, ya que las referencias no se pasan automáticamente a los componentes funcionales.

Ejemplo con forwardRef:

Ahora, veamos cómo forwardRef soluciona esto.

const Button = React.forwardRef((props, ref) => {
  return <button ref={ref}>{props.children}</button>;
});

const App = () => {
  const buttonRef = useRef(null);
  return <Button ref={buttonRef}>Click Me</Button>;
};

En este ejemplo, forwardRef permite que el componente padre pase una ref al hijo, lo que facilita el acceso directo al DOM y permite manipulaciones como enfocar el botón.

Beneficios de React forwardRef

Como pueden ver, forwardRef permite que el componente padre pase una ref al hijo, lo que facilita el acceso directo al DOM y permite manipulaciones como enfocar el botón. Este patrón es especialmente útil en componentes reutilizables y librerías de componentes, donde la encapsulación del DOM dentro de componentes funcionales es común.

¿Qué es useRef?

useRef es un hook que nos permite crear una referencia mutable que persiste a través de las renderizaciones de un componente. Esto es útil para acceder a elementos del DOM o para almacenar valores que no requieren una re-renderización cuando cambian.

Ejemplo Básico de useRef

Veamos un ejemplo básico usando useRef para enfocar un input cuando la página se carga.

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

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);

  return <input ref={inputRef} placeholder="Enter text" />;
};

En este ejemplo, useRef nos permite mantener una referencia al input y usar esa referencia para enfocarlo cuando el componente se monta. Esto es útil porque useRef no causa una re-renderización cuando cambia su valor.

Beneficios de useRef

El uso de useRef ofrece varios beneficios clave:

Persistencia de Valores: Las referencias creadas con useRef persisten entre renderizaciones, lo que permite mantener un estado sin causar re-renderizaciones innecesarias.
Acceso Directo al DOM: useRef proporciona una manera fácil y eficiente de acceder y manipular elementos del DOM directamente.
Compatibilidad con forwardRef: useRef puede usarse en conjunto con forwardRef para crear componentes altamente reutilizables y manejables.

Ejemplo Práctico Combinando React forwardRef y useRef

Ahora, veamos un ejemplo práctico donde combinamos forwardRef y useRef para crear un componente reutilizable y manejable.

const Button = React.forwardRef((props, ref) => {
  return <button ref={ref} className="btn">{props.children}</button>;
});

const App = () => {
  const buttonRef = useRef(null);

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

  return (
    <div>
      <Button ref={buttonRef}>Click Me</Button>
      <button onClick={handleClick}>Focus the Button</button>
    </div>
  );
};

En este ejemplo, forwardRef permite que la ref pase desde el componente App al componente Button. Luego, usamos useRef en App para crear y manejar esa ref, permitiendo que el botón se enfoque cuando hacemos clic en el segundo botón.

React.forwardRef y useRef son herramientas poderosas que nos permiten manejar referencias en React de manera eficiente. forwardRef nos permite pasar refs a componentes funcionales, y useRef nos permite mantener referencias que persisten entre renderizaciones. Juntas, estas herramientas facilitan el manejo del DOM y la creación de componentes reutilizables.

Recursos adicionales

Documentación React forwardRef

Documentación useRef()

Forem: Antonio Rodríguez