En React, la manipulación directa del DOM es menos común debido al sistema de representación virtual (virtual DOM). Sin embargo, en ciertos casos es necesario interactuar directamente con elementos del DOM. En este capítulo, aprenderemos a utilizar Refs para acceder y manipular elementos del DOM y exploraremos algunos casos prácticos.

Dom manipulation con Refs

¿Qué Son las Refs en React?

Las Refs son una función que proporciona React para referenciar elementos o componentes creados en el DOM. Nos permiten manipular directamente el DOM de estos elementos sin comprometer la estructura declarativa de React, siendo útiles para casos como animaciones, control de formularios y gestión de elementos externos.

Creación y Uso Básico de una Ref

Las Refs se crean usando el hook useRef en componentes funcionales. La referencia creada se mantiene durante el ciclo de vida completo del componente sin ser reinicializada en cada renderizado.

Ejemplo de Uso Básico con useRef

En este ejemplo, utilizamos una Ref para enfocar un campo de entrada (input) automáticamente cuando el componente se monta:

javascript

Manipulación de Elementos del DOM con Refs

Las Refs son útiles para controlar directamente elementos del DOM cuando es necesario, como reproducir o pausar un video o manipular propiedades de estilo de un elemento específico.

Ejemplo: Control de un Elemento de Video

Aquí, usamos una Ref para pausar o reproducir un video mediante botones de control:

javascript

Refs y Componentes Controlados

Aunque las Refs son útiles para acceder directamente al DOM, en formularios es preferible utilizar componentes controlados con estados. Sin embargo, en situaciones donde es necesario un acceso directo, las Refs pueden facilitar el proceso.

Ejemplo: Validación de un Formulario con Refs

Este ejemplo muestra cómo utilizar Refs para acceder a varios campos de un formulario y validarlos al enviar:

javascript

Uso Avanzado de Refs: Forwarding Refs

El forwarding de Refs permite pasar una ref a un componente hijo, otorgando acceso directo a un elemento del DOM dentro del componente hijo. Esto es útil cuando se necesita una referencia en componentes reutilizables o bibliotecas.

Ejemplo de Forwarding Refs

Aquí tenemos un componente CustomInput que acepta una Ref y la reenvía al input interno:

javascript

Uso del Componente con Forwarding Refs

Para utilizar el componente CustomInput, se asigna una Ref desde el componente padre:

javascript

Buenas Prácticas al Usar Refs

• Usar Refs con Moderación: Las Refs son una herramienta poderosa, pero no se recomienda su uso excesivo, ya que pueden complicar el manejo del estado de la aplicación.
• Prefiere los Componentes Controlados para Formularios: En formularios, los componentes controlados con estados son más declarativos y fáciles de mantener.
• Forwarding de Refs para Componentes Reutilizables: Implementa forwardRef en componentes reutilizables para facilitar el acceso al DOM desde componentes padres.

Conclusión

Las Refs y el manejo directo del DOM son herramientas avanzadas que permiten acceder y manipular elementos específicos en una aplicación React. En este capítulo, exploramos el uso básico de Refs, manipulación de elementos del DOM, y forwarding de Refs para componentes reutilizables.