Salidas de Emergencia

Algunos de tus componentes pueden necesitar controlar y sincronizarse con sistemas externos a React. Por ejemplo, es posible que necesites enfocar una entrada usando la API del navegador, reproducir y pausar un reproductor de video implementado sin React, o conectarte y escuchar mensajes de un servidor remoto. En este capítulo, aprenderás las salidas de emergencia que te permiten "salir" de React y conectarte a sistemas externos. La mayor parte de la lógica de tu aplicación y el flujo de datos no deberían depender de estas características.

Referenciar valores con refs

Cuando quieres que un componente "recuerde" cierta información, pero no quieres que esa informacióndesencadene nuevos renderizados, puedes usar unaref:

Al igual que el estado, las refs son retenidas por React entre renderizados. Sin embargo, establecer el estado vuelve a renderizar un componente. ¡Cambiar una ref no lo hace! Puedes acceder al valor actual de esa ref a través de la propiedadref.current.

Una ref es como un bolsillo secreto de tu componente que React no rastrea. Por ejemplo, puedes usar refs para almacenarIDs de timeout,elementos DOMy otros objetos que no afectan la salida de renderizado del componente.

Manipular el DOM con refs

React actualiza automáticamente el DOM para que coincida con tu salida de renderizado, por lo que tus componentes no suelen necesitar manipularlo. Sin embargo, a veces es posible que necesites acceder a los elementos DOM gestionados por React, por ejemplo, para enfocar un nodo, desplazarte hasta él o medir su tamaño y posición. No hay una forma incorporada de hacer esas cosas en React, por lo que necesitarás una ref al nodo DOM. Por ejemplo, al hacer clic en el botón se enfocará la entrada usando una ref:

Sincronizar con Efectos

Algunos componentes necesitan sincronizarse con sistemas externos. Por ejemplo, es posible que desees controlar un componente no React basado en el estado de React, configurar una conexión de servidor o enviar un registro de análisis cuando un componente aparece en pantalla. A diferencia de los controladores de eventos, que te permiten manejar eventos particulares, losEfectoste permiten ejecutar algún código después del renderizado. Úsalos para sincronizar tu componente con un sistema externo a React.

Presiona Reproducir/Pausar varias veces y observa cómo el reproductor de video se mantiene sincronizado con el valor de la propiedadisPlaying:

Muchos Efectos también "limpian" después de sí mismos. Por ejemplo, un Efecto que establece una conexión a un servidor de chat debe devolver unafunción de limpiezaque le indique a React cómo desconectar tu componente de ese servidor:

En desarrollo, React ejecutará y limpiará tu Efecto una vez adicional de inmediato. Por eso ves"✅ Connecting..."impreso dos veces. Esto asegura que no olvides implementar la función de limpieza.

Puede que no necesites un Efecto

Los Efectos son una vía de escape del paradigma de React. Te permiten "salir" de React y sincronizar tus componentes con algún sistema externo. Si no hay un sistema externo involucrado (por ejemplo, si quieres actualizar el estado de un componente cuando cambian algunas props o el estado), no deberías necesitar un Efecto. Eliminar Efectos innecesarios hará que tu código sea más fácil de seguir, se ejecute más rápido y sea menos propenso a errores.

Hay dos casos comunes en los que no necesitas Efectos:

• No necesitas Efectos para transformar datos para el renderizado.
• No necesitas Efectos para manejar eventos de usuario.

Por ejemplo, no necesitas un Efecto para ajustar algún estado basado en otro estado:

En su lugar, calcula tanto como puedas durante el renderizado:

Sin embargo,sínecesitas Efectos para sincronizar con sistemas externos.

Ciclo de vida de los efectos reactivos

Los Efectos tienen un ciclo de vida diferente al de los componentes. Los componentes pueden montarse, actualizarse o desmontarse. Un Efecto solo puede hacer dos cosas: comenzar a sincronizar algo y, más tarde, dejar de sincronizarlo. Este ciclo puede ocurrir múltiples veces si tu Efecto depende de props y estado que cambian con el tiempo.

Este Efecto depende del valor de la proproomId. Las props sonvalores reactivos,lo que significa que pueden cambiar en un nuevo renderizado. Observa que el Efectose resincroniza(y se reconecta al servidor) siroomIdcambia:

React proporciona una regla de linter para verificar que hayas especificado correctamente las dependencias de tu Efecto. Si olvidas especificarroomIden la lista de dependencias en el ejemplo anterior, el linter encontrará ese error automáticamente.

Separar eventos de Efectos

Los controladores de eventos solo se vuelven a ejecutar cuando realizas la misma interacción nuevamente. A diferencia de los controladores de eventos, los Efectos se resincronizan si alguno de los valores que leen, como props o estado, es diferente al del último renderizado. A veces, quieres una mezcla de ambos comportamientos: un Efecto que se vuelva a ejecutar en respuesta a algunos valores pero no a otros.

Todo el código dentro de los Efectos esreactivo.Se volverá a ejecutar si algún valor reactivo que lee ha cambiado debido a un nuevo renderizado. Por ejemplo, este Efecto se reconectará al chat siroomId o themehan cambiado:

Esto no es ideal. Quieres reconectarte al chat solo si elroomIdha cambiado. Cambiar eltheme¡no debería reconectarte al chat! Mueve el código que leethemefuera de tu Efecto a unEvento de Efecto:

El código dentro de los Eventos de Efecto no es reactivo, por lo que cambiar elthemeya no hace que tu Efecto se reconecte.

Eliminar dependencias de Efectos

Cuando escribes un Efecto, el linter verifica que hayas incluido cada valor reactivo (como props y estado) que el Efecto lee en la lista de dependencias de tu Efecto. Esto asegura que tu Efecto permanezca sincronizado con las últimas props y estado de tu componente. Las dependencias innecesarias pueden hacer que tu Efecto se ejecute con demasiada frecuencia, o incluso crear un bucle infinito. La forma de eliminarlas depende del caso.

Por ejemplo, este Efecto depende del objetooptionsque se vuelve a crear cada vez que editas la entrada:

No querrás que el chat se reconecte cada vez que empiezas a escribir un mensaje. Para solucionar este problema, mueve la creación del objetooptionsdentro del Efecto para que el Efecto solo dependa de la cadenaroomId:

Observa que no empezaste editando la lista de dependencias para eliminar la dependencia deoptions. Eso sería incorrecto. En su lugar, cambiaste el código circundante para que la dependencia se volvierainnecesaria.Piensa en la lista de dependencias como una lista de todos los valores reactivos utilizados por el código de tu Efecto. No eliges intencionalmente qué poner en esa lista. La lista describe tu código. Para cambiar la lista de dependencias, cambia el código.

Reutilizar lógica con Hooks personalizados

React incluye Hooks incorporados comouseState,useContext y useEffect. A veces, desearás que existiera un Hook para algún propósito más específico: por ejemplo, para obtener datos, para rastrear si el usuario está en línea o para conectarse a una sala de chat. Para ello, puedes crear tus propios Hooks para las necesidades de tu aplicación.

En este ejemplo, el Hook personalizadousePointerPositionrastrea la posición del cursor, mientras que el Hook personalizadouseDelayedValuedevuelve un valor que "va retrasado" respecto al valor que pasaste por un cierto número de milisegundos. Mueve el cursor sobre el área de vista previa del sandbox para ver un rastro móvil de puntos que sigue al cursor:

Puedes crear Hooks personalizados, componerlos, pasar datos entre ellos y reutilizarlos entre componentes. A medida que tu aplicación crece, escribirás menos Efectos manualmente porque podrás reutilizar los Hooks personalizados que ya escribiste. También hay muchos Hooks personalizados excelentes mantenidos por la comunidad de React.

¿Qué sigue?

Dirígete aReferenciar valores con Refspara empezar a leer este capítulo página por página.