React Refs: Desmitificando useRef vs. createRef

En el dinámico mundo del desarrollo React, la gestión eficiente del estado de los componentes y la interacción con el Modelo de Objetos del Documento (DOM) son cruciales. React Refs proporciona un mecanismo para acceder y manipular directamente los elementos DOM o los componentes React. Dos métodos principales para crear Refs son useRef y createRef. Si bien ambos sirven para crear Refs, difieren en su implementación y casos de uso. Esta guía tiene como objetivo desmitificar estos dos enfoques, proporcionando claridad sobre cuándo y cómo aprovecharlos de manera efectiva en sus proyectos React, particularmente cuando se desarrolla para una audiencia global.

Entendiendo React Refs

Un Ref (abreviatura de referencia) es una característica de React que le permite acceder directamente a un nodo DOM o a un componente React. Esto es particularmente útil cuando necesita:

• Manipular directamente un elemento DOM, como enfocar un campo de entrada.
• Acceder a los métodos o propiedades de un componente hijo.
• Administrar valores que persisten entre renderizados sin causar re-renderizados (similar a las variables de instancia en los componentes de clase).

Si bien React fomenta un enfoque declarativo, donde la interfaz de usuario se gestiona a través del estado y las props, hay situaciones en las que la manipulación directa es necesaria. Los Refs proporcionan una forma de cerrar la brecha entre la naturaleza declarativa de React y las operaciones imperativas del DOM.

createRef: El enfoque del componente de clase

createRef es un método proporcionado por React. Se utiliza principalmente dentro de los componentes de clase para crear Refs. Cada vez que se crea una instancia de un componente de clase, createRef crea un nuevo objeto Ref. Esto asegura que cada instancia del componente tenga su propio Ref único.

Sintaxis y uso

Para usar createRef, primero debe declarar un Ref en su componente de clase, típicamente en el constructor. Luego, adjunta el Ref a un elemento DOM o a un componente usando el atributo ref.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    // Acceder al elemento DOM después de que el componente se monte
    this.myRef.current.focus();
  }

  render() {
    return ;
  }
}

En este ejemplo, this.myRef se crea usando React.createRef(). Luego se asigna al atributo ref del elemento de entrada. Después de que el componente se monta (en componentDidMount), puede acceder al nodo DOM real usando this.myRef.current y realizar operaciones en él (en este caso, enfocar la entrada).

Ejemplo: Enfocar un campo de entrada

Consideremos un escenario en el que desea enfocar un campo de entrada automáticamente cuando se monta un componente. Este es un caso de uso común para Refs, especialmente en formularios o elementos interactivos.

class FocusInput extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  componentDidMount() {
    this.inputRef.current.focus();
  }

  render() {
    return (
      

        
      
    );
  }
}

En este ejemplo, FocusInput enfoca el campo de entrada inmediatamente después del montaje. Esto puede mejorar la experiencia del usuario al dirigir la atención del usuario al elemento de entrada tan pronto como se representa el componente.

Consideraciones importantes con createRef

• Solo componentes de clase: createRef está diseñado para usarse en componentes de clase. Si bien técnicamente podría funcionar en componentes funcionales, no es el uso previsto y puede llevar a un comportamiento inesperado.
• Nuevo Ref en cada instancia: Cada instancia de un componente de clase obtiene su propio createRef. Esto es importante para mantener el aislamiento entre las instancias de los componentes.

useRef: El hook de componente funcional

useRef es un Hook que se introdujo en React 16.8. Proporciona una forma de crear objetos Ref mutables dentro de los componentes funcionales. A diferencia de createRef, useRef devuelve el mismo objeto Ref cada vez que el componente se renderiza. Esto lo hace ideal para persistir valores entre renderizados sin activar re-renderizados.

Sintaxis y uso

Usar useRef es sencillo. Llama al Hook useRef, pasando un valor inicial. El Hook devuelve un objeto con una propiedad .current, que luego puede usar para acceder y modificar el valor.

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

function MyFunctionalComponent() {
  const myRef = useRef(null);

  useEffect(() => {
    // Acceder al elemento DOM después de que el componente se monte
    if (myRef.current) {
      myRef.current.focus();
    }
  }, []);

  return ;
}

En este ejemplo, useRef(null) crea un Ref con un valor inicial de null. El Hook useEffect se usa para acceder al elemento DOM después de que el componente se monta. La propiedad myRef.current contiene la referencia al elemento de entrada, lo que le permite enfocarlo.

Ejemplo: Seguimiento de valores de prop anteriores

Un caso de uso poderoso para useRef es el seguimiento del valor anterior de una prop. Dado que los cambios en los Refs no activan re-renderizados, puede usarlos para almacenar valores que desea que persistan entre renderizados sin afectar la interfaz de usuario.

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

function PreviousValueComponent({ value }) {
  const previousValue = useRef();

  useEffect(() => {
    previousValue.current = value;
  }, [value]);

  return (
    

      
Valor actual: {value}
      
Valor anterior: {previousValue.current}
    
  );
}

En este ejemplo, previousValue.current almacena el valor anterior de la prop value. El Hook useEffect actualiza el Ref cada vez que cambia la prop value. Esto le permite comparar los valores actuales y anteriores, lo que puede ser útil para detectar cambios o implementar animaciones.

Consideraciones importantes con useRef

• Solo componentes funcionales: useRef es un Hook y solo se puede usar dentro de componentes funcionales o Hooks personalizados.
• Persiste entre renderizados: El Hook useRef devuelve el mismo objeto Ref en cada renderizado. Esta es la clave de su capacidad para persistir valores sin activar re-renderizados.
• Propiedad .current mutable: Puede modificar directamente la propiedad .current del objeto Ref.
• Valor inicial: Puede proporcionar un valor inicial a useRef. Este valor se asignará a la propiedad .current cuando el componente se renderice por primera vez.
• Sin re-renderizados: Modificar la propiedad .current de un Ref no causa un re-renderizado del componente.

useRef vs. createRef: Una comparación detallada

Ahora que hemos explorado tanto useRef como createRef individualmente, comparémoslos lado a lado para resaltar sus diferencias clave y cuándo elegir uno u otro.

Característica	useRef	createRef
Tipo de componente	Componentes funcionales	Componentes de clase
Hook o método	Hook	Método
Instancia Ref	Devuelve el mismo objeto Ref en cada renderizado	Crea un nuevo objeto Ref en cada instancia del componente
Casos de uso	Acceder a elementos DOM Persistir valores entre renderizados sin activar re-renderizados Seguimiento de valores de prop anteriores Almacenar valores mutables que no causan re-renderizados	Acceder a elementos DOM Acceder a métodos de componentes secundarios

Elegir el Ref correcto: una guía de decisión

Aquí hay una guía sencilla para ayudarlo a elegir entre useRef y createRef:

• ¿Está trabajando con un componente funcional? Use useRef.
• ¿Está trabajando con un componente de clase? Use createRef.
• ¿Necesita persistir un valor entre renderizados sin activar re-renderizados? Use useRef.
• ¿Necesita realizar un seguimiento del valor anterior de una prop? Use useRef.

Más allá de la manipulación del DOM: casos de uso avanzados para Refs

Si bien el acceso y la manipulación de elementos DOM es un caso de uso principal para Refs, ofrecen posibilidades más allá de esta funcionalidad principal. Exploremos algunos escenarios avanzados donde los Refs pueden ser particularmente útiles.

1. Acceder a métodos de componentes secundarios

Los Refs se pueden usar para acceder a los métodos definidos en los componentes secundarios. Esto permite que un componente principal active acciones o recupere datos directamente de sus hijos. Este enfoque es particularmente útil cuando necesita un control preciso sobre los componentes secundarios.

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.childRef = React.createRef();
  }

  handleClick = () => {
    // Llama a un método en el componente secundario
    this.childRef.current.doSomething();
  };

  render() {
    return (
      

        
        Activar acción secundaria
      
    );
  }
}

class ChildComponent extends React.Component {
  doSomething = () => {
    console.log('¡Acción del componente secundario activada!');
  };

  render() {
    return 
Este es un componente secundario.
;
  }
}

En este ejemplo, el ParentComponent usa un Ref para acceder al ChildComponent y llamar a su método doSomething.

2. Gestión de enfoque y selección

Los Refs son invaluables para administrar el enfoque y la selección dentro de los campos de entrada y otros elementos interactivos. Esto es crucial para crear interfaces accesibles y fáciles de usar.

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

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

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
      inputRef.current.select(); // Seleccionar el texto en la entrada
    }
  }, []);

  return ;
}

Este ejemplo enfoca la entrada y selecciona su texto tan pronto como se monta el componente.

3. Animación de elementos

Los Refs se pueden usar junto con bibliotecas de animación (como GreenSock o Framer Motion) para manipular directamente el DOM y crear animaciones complejas. Esto permite un control preciso sobre las secuencias de animación.

Ejemplo usando JavaScript vanilla para simplificar:

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

function AnimatedBox() {
  const boxRef = useRef(null);

  useEffect(() => {
    const box = boxRef.current;
    if (box) {
      // Animación simple: mover el cuadro a la derecha
      box.animate(
        [
          { transform: 'translateX(0)' },
          { transform: 'translateX(100px)' },
        ],
        {
          duration: 1000, // 1 segundo
          iterations: Infinity, // Repetir para siempre
          direction: 'alternate',
        }
      );
    }
  }, []);

  return 
;
}

Este ejemplo usa la API de animaciones web para animar un cuadro simple, moviéndolo hacia adelante y hacia atrás horizontalmente.

Mejores prácticas para usar React Refs en aplicaciones globales

Al desarrollar aplicaciones React para una audiencia global, es importante considerar cómo los Refs interactúan con la internacionalización (i18n) y la localización (l10n). Aquí hay algunas mejores prácticas:

1. Accesibilidad (A11y)

Asegúrese de que su uso de Refs no afecte negativamente la accesibilidad. Por ejemplo, al enfocar programáticamente los elementos, considere el orden de enfoque del usuario y si el cambio de enfoque es apropiado para los lectores de pantalla y los usuarios de teclado.

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

function AccessibleFocus() {
  const buttonRef = useRef(null);

  useEffect(() => {
    const button = buttonRef.current;
    if (button) {
      // Solo enfocar si el botón aún no está enfocado por el usuario
      if (document.activeElement !== button) {
        button.focus();
      }
    }
  }, []);

  return Haz clic en mí;
}

2. Campos de entrada internacionalizados

Cuando trabaje con campos de entrada, tenga en cuenta los diferentes métodos de entrada y conjuntos de caracteres utilizados en diferentes idiomas. Asegúrese de que sus manipulaciones basadas en Ref (por ejemplo, selección, posición del cursor) funcionen correctamente en varios tipos de entrada y configuraciones regionales. Pruebe sus componentes a fondo con diferentes idiomas y métodos de entrada.

3. Diseños de derecha a izquierda (RTL)

Si su aplicación es compatible con los idiomas RTL (por ejemplo, árabe, hebreo), asegúrese de que sus manipulaciones del DOM usando Refs tengan en cuenta el diseño invertido. Por ejemplo, al animar elementos, considere invertir la dirección de la animación para los idiomas RTL.

4. Consideraciones de rendimiento

Si bien los Refs brindan una forma poderosa de interactuar con el DOM, el uso excesivo puede generar problemas de rendimiento. La manipulación directa del DOM omite el DOM virtual de React y el proceso de reconciliación, lo que podría generar inconsistencias y actualizaciones más lentas. Use Refs con prudencia y solo cuando sea necesario.

Conclusión

React Refs, específicamente useRef y createRef, son herramientas esenciales para los desarrolladores de React. Comprender los matices de cada enfoque y cuándo aplicarlos de manera efectiva es crucial para crear aplicaciones sólidas y de alto rendimiento. createRef sigue siendo el estándar para administrar Refs dentro de los componentes de clase, asegurando que cada instancia tenga su Ref único. useRef, con su naturaleza persistente entre renderizados, es ideal para componentes funcionales, ofreciendo una forma de administrar elementos DOM y persistir valores sin activar re-renderizados innecesarios. Al aprovechar estas herramientas sabiamente, puede mejorar la funcionalidad y la experiencia del usuario de sus aplicaciones React, atendiendo a una audiencia global con interfaces accesibles y de alto rendimiento.

A medida que React continúa evolucionando, dominar estos conceptos fundamentales le permitirá crear experiencias web innovadoras y fáciles de usar que trascienden las fronteras geográficas y culturales. Recuerde priorizar la accesibilidad, la internacionalización y el rendimiento para ofrecer aplicaciones verdaderamente globales.