Deja de hacer Prop Drilling con tus modales en React (usa react-call)

EspañolالعربيةDeutschEnglishFrançaisहिन्दीBahasa Indonesia日本語한국어PortuguêsРусский中文
BBetter Stack
Computing/SoftwareInternet Technology

Transcript

00:00:00React acaba de recibir una herramienta nueva muy interesante que cambia por completo cómo pensamos sobre
00:00:05la renderización de elementos de interfaz de usuario interactivos como modales, diálogos o cuadros de confirmación.
00:00:11Se llama React Call.
00:00:13Si alguna vez has creado un asistente de formularios complejo de varios pasos, un modal de confirmación o un selector
00:00:18de elementos en React, ya sabes que gestionar estados de apertura, pasar devoluciones de llamada de éxito y
00:00:24manejar promesas puede convertir tu código en un auténtico desastre.
00:00:28Pero React Call está diseñado para resolver este problema.
00:00:31Así que en el vídeo de hoy vamos a echar un vistazo a React Call, ver cómo funciona y observar
00:00:36algunos ejemplos de código.
00:00:37Va a ser muy divertido, así que vamos a ello.
00:00:44¿Qué es exactamente React Call?
00:00:47Bueno, es una utilidad pequeña y ligera que te permite llamar a componentes de React como funciones
00:00:52asíncronas.
00:00:53Piensa en la API nativa window.confirm del navegador.
00:00:57Cuando la llamas, tu código se pausa literalmente, espera a que el usuario haga clic en Aceptar o cancelar, y
00:01:03devuelve un valor booleano directamente en línea.
00:01:06Mantiene tu lógica de negocio totalmente local a quien la invoca.
00:01:09Y React Call trae exactamente ese mismo modelo mental intuitivo al mundo moderno de React.
00:01:16En lugar de crear una variable de estado separada como isModalOpen, pasar un prop onClose o un
00:01:22onSubmit, y configurar complejos proveedores de contexto o portales, puedes simplemente esperar la
00:01:29respuesta del componente.
00:01:30Internamente, abstrae la gestión de promesas, maneja las solicitudes y respuestas de tipos
00:01:36de forma inmediata, y es totalmente compatible con la sustitución de módulos en caliente, para que tu flujo de trabajo de desarrollo se mantenga
00:01:41rápido.
00:01:42Y aporta tres conceptos: raíz y pila, upsert y flujo de mutación.
00:01:48Así que el primer concepto importante es raíz y pila.
00:01:50Con React Call, el componente invocable que creas no es una función.
00:01:54En realidad actúa como su propio punto de montaje en el árbol de tu aplicación.
00:01:58Colocas el componente como una etiqueta raíz en cualquier lugar visible, como en tu archivo de aplicación o un archivo de diseño
00:02:03de alto nivel, y permanece ahí como un oyente.
00:02:06Cuando disparas múltiples llamadas, React Call las gestiona usando una pila interna, y
00:02:11maneja la renderización de cada instancia activa automáticamente.
00:02:14Y también maneja animaciones de salida limpias cuando se cierran y mantiene las instancias aisladas para que
00:02:20no se estorben entre sí.
00:02:22El siguiente es upsert, que es un salvavidas absoluto para los patrones de interfaz de usuario singleton.
00:02:27Normalmente, si llamas a un componente varias veces, empuja una nueva instancia a la pila.
00:02:33Pero, ¿qué pasa si estás creando un aviso de notificación global, o una superposición de carga, o un indicador de progreso
00:02:39donde solo quieres que haya una instancia en la pantalla a la vez?
00:02:45Bueno, en lugar de ejecutar call, puedes ejecutar upsert.
00:02:48Y si ya hay una instancia activa, actualiza suavemente el componente existente con tus nuevos
00:02:52datos sobre la marcha, en lugar de generar un duplicado.
00:02:56Y por último, tenemos el flujo de mutación.
00:02:58Esta biblioteca incluye un hook incorporado useMutationFlow diseñado específicamente para vincular tu interfaz de usuario
00:03:04invocable directamente a acciones asíncronas.
00:03:06Si tienes un modal de confirmación que activa una solicitud de API de backend pesada al enviarse, el hook
00:03:12gestiona el estado pendiente por ti de inmediato.
00:03:15Asegura que el modal permanezca abierto y muestre un spinner de carga mientras la función asíncrona se ejecuta y
00:03:21solo finaliza oficialmente la llamada una vez que la promesa se resuelve con éxito.
00:03:25Así que une maravillosamente tu estado de UI y tus mutaciones de datos.
00:03:29Ahora veamos algunos ejemplos prácticos en su sitio web, porque creo que son súper
00:03:34autoexplicativos.
00:03:36Y creo que también muestran cuánto poco código realmente necesitas escribir para poner algo en marcha.
00:03:41Así que, por ejemplo, en el cuadro de diálogo de confirmación, solo necesitamos crear un invocable aquí.
00:03:48Y luego envolvemos nuestro componente como un componente de orden superior con este hook create callable.
00:03:54Y entonces podemos pasar las funciones de llamada para nuestros botones al hacer clic.
00:04:01Y eso es todo lo que necesitamos para el objeto invocable.
00:04:04Y en la raíz, solo necesitamos importar el componente en sí.
00:04:08Y para el botón de eliminar, dado que nuestro componente de confirmación está envuelto con la función de orden superior
00:04:14create callable, podemos simplemente invocarlo de forma asíncrona en esta función handle click.
00:04:21Así que es muy limpio, muy ordenado, no mucho código repetitivo.
00:04:26Y no tienes que usar ningún proveedor de contexto o variables de estado o redux o zustand.
00:04:31Y si quieres profundizar en cuántos casos de uso hay, puedes consultar la sección de ejemplos
00:04:36y cada ejemplo también proporciona un fragmento de código.
00:04:40Algunos de ellos son incluso altamente complejos, como por ejemplo, los que tratan con acciones asíncronas
00:04:46ejecutándose en segundo plano.
00:04:49Así que puedes ver todos estos ejemplos geniales.
00:04:52Creo que es súper genial y súper ligero.
00:04:55Bien hecho.
00:04:56Así que ahí lo tienen, amigos.
00:04:57Eso es React Call en pocas palabras.
00:04:59Bueno, ciertamente podrías programar un envoltorio de promesa personalizado básico o un solo modal tú mismo.
00:05:06Creo que esta biblioteca maneja todos los casos extremos difíciles maravillosamente, como manejar múltiples
00:05:11instancias activas en una pila o actualizar singletons mediante upsert y sincronizar estados de UI con pesadas
00:05:17mutaciones de backend.
00:05:18Así que creo que es una utilidad súper agradable y ligera para tener en tu kit de herramientas de frontend para una arquitectura
00:05:24de React más limpia y legible.
00:05:26¿Qué piensas sobre React Call?
00:05:28¿Te gusta este patrón?
00:05:29¿Lo usarás en tus proyectos?
00:05:31Háznoslo saber en la sección de comentarios a continuación.
00:05:33Y amigos, si les gustan estos tipos de desgloses técnicos, por favor háganmelo saber aplastando
00:05:37ese botón de me gusta debajo del video.
00:05:39Y también no olviden suscribirse a nuestro canal.
00:05:42Ha sido Andrus de BetterStack, y los veré en los próximos videos.
00:05:58tú

Key Takeaway

React Call simplifica la arquitectura de componentes interactivos en React al transformar la gestión de estados de UI en llamadas asíncronas directas, eliminando el exceso de código de estado repetitivo.

Highlights

  • React Call permite invocar componentes de UI, como modales o diálogos, como funciones asíncronas similares a window.confirm.

  • La biblioteca elimina la necesidad de gestionar estados como isModalOpen, proveedores de contexto complejos o prop drilling.

  • La pila interna de React Call gestiona automáticamente múltiples instancias activas y sus animaciones de salida.

  • El método upsert permite actualizar una única instancia existente en pantalla en lugar de crear duplicados, útil para notificaciones o indicadores de carga.

  • El hook useMutationFlow vincula componentes invocables con acciones asíncronas de backend, manteniendo estados de carga durante la ejecución de promesas.

Timeline

El problema del manejo de estados en UI

  • La gestión de modales, diálogos y selectores mediante estados de apertura y promesas genera código desordenado.
  • React Call actúa como una utilidad ligera para invocar componentes como funciones asíncronas.

La creación de formularios complejos o diálogos de confirmación requiere habitualmente estados de apertura, devoluciones de llamada de éxito y promesas que complican el mantenimiento del código. React Call propone un modelo mental basado en la API nativa window.confirm, donde el código espera la interacción del usuario y devuelve un valor directamente en línea.

Arquitectura y conceptos de React Call

  • Los componentes invocables funcionan como puntos de montaje independientes en el árbol de la aplicación.
  • La pila interna aísla instancias múltiples para evitar conflictos entre ellas.
  • La función upsert actualiza componentes singleton en lugar de añadir nuevas instancias al DOM.

React Call utiliza un sistema de raíz y pila para gestionar los componentes. Al situar un componente raíz en el diseño de alto nivel, este actúa como oyente. El uso de upsert es esencial para patrones singleton, como indicadores de progreso o notificaciones, asegurando que solo exista un elemento activo mientras los datos se actualizan dinámicamente.

Integración y ejecución práctica

  • El hook useMutationFlow conecta la UI directamente con acciones asíncronas de backend.
  • La función de orden superior create callable permite transformar componentes con poco código repetitivo.
  • La biblioteca elimina la dependencia de proveedores de contexto, Redux o Zustand para la gestión de modales.

Mediante el uso de useMutationFlow, la UI mantiene estados de carga automáticamente mientras una promesa de backend se resuelve. El proceso de implementación es directo: se envuelve el componente con create callable y se invoca de manera asíncrona mediante un manejador de eventos. Esto permite una arquitectura más limpia y legible sin necesidad de librerías de gestión de estado externas.

Community Posts

No posts yet. Be the first to write about this video!

Write about this video