banner reactjs

Flujo de Información

Cuando armamos nuestras UI (User Interface), es necesario que la información que el usuario manipula sea correctamente recibida por los distintos Componentes encargados de renderizar dicha información. Los distintos framework utilizan distintas técnicas para lograr ese traspaso de datos conocido como “Flujo de Información”. En React, el flujo de información es vertical y unidireccional.

En un post anterior, hablamos sobre la importancia del State de un Componente para modificar la vista de forma dinámica. También, dijimos que un valor que pertenece al State de un Componente puede ser renderizado por otro gracias a las Props. Esto solo es posible si el Componente que usa la Prop se encuentra dentro del Componente con el valor de State. En otras palabras, los Componentes son capaces de mostrar la información de otro en tanto y en cuanto exista una relación jerárquica directa entre ellos. 

Esta interacción es conocida como Comunicación entre Componentes. 

Comunicación entre Componentes

En React, existen tres formas de comunicar Componentes:

  • De Componente Padre a Componente Hijo - Este es el tipo de Comunicación básica y se logra mediante State y Props. El Componente Padre pasa un valor de su State al Componente Hijo mediante Props y es este el encargado de renderizarlo. El cambio en el valor del State genera la actualización del valor de la Prop.
  • De Componente Hijo a Componente Padre - Este tipo de Comunicación implica “invertir el flujo de información” y para lograrlo necesitaremos agregar Eventos al trabajo con State y Props. En este caso, el Componente Padre pasa un valor de su State y una función encargada de modificar dicho valor al Componente Hijo mediante Props. El Componente Hijo usará un Evento para indicar cuándo debe ejecutarse la función modificadora del valor de State lo que, a su vez, genera la actualización del valor de Prop que se está renderizando en el Componente Hijo.
  • Entre Componentes no relacionados - Este tipo de Comunicación, al no ser parte del flujo normal de información, solo es posible si agregamos herramientas pensadas para lograrla como lo son Context API o React Redux. Estas herramientas escapan el alcance de este post.

Eventos

Antes de presentar ejemplos de comunicación vamos a entender cómo trabajan los Eventos en React. 

Empecemos recordando que todo lo que hacemos en React afecta al virtualDOM y, por tanto, los Eventos de React no son exactamente los mismos que utilizamos cuando trabajamos con JavaScript vanilla (solo JS, sin ningún framework/librería intermediaria). 

Los Eventos en JS vanilla dependen del navegador que se esté empleando, por lo que es probable que un mismo Evento tenga un comportamiento distinto en navegadores distintos. En React, para facilitar el desarrollo de aplicaciones, se creó un envoltorio para los Eventos de JS vanilla cuya finalidad principal es lograr que el mismo Evento tenga el mismo comportamiento en distintos navegadores. 

En React, entonces, podemos reconocer tres tipos de Eventos:

  • Eventos Nativos - Son los Eventos que se encuentran en los distintos navegadores y, a menos que necesitemos llegar a alguna propiedad muy específica, nunca usaremos
  • Eventos Sintéticos - Son los Eventos que se crean producto del envoltorio pensado para normalizar el comportamiento en los distintos navegadores. En la gran mayoría de los casos, cuando trabajamos con Eventos son estos lo que estamos usando.
  • Eventos Personalizados - En JS vanilla, si queremos que un Evento reciba un Argumento que no sea el Objeto Evento, debemos crear una función que se ejecute dentro de la Función Callback del Evento. En React, esa función es conocida como Evento Personalizado
Evento Personalizado en Componente de Clase

Evento Personalizado en Componente Funcional


Lifting State Up

Anteriormente, establecimos que en React tenemos un Flujo de Información vertical y unidireccional, lo que implica que la comunicación entre Componentes queda limitada aquellos que se encuentran verticalmente relacionados. Incluso hablamos que existen herramientas que nos permiten evitar esta limitación. Ahora bien, esto no quiere decir que sin estas herramientas sea completamente imposible comunicar dos Componentes no relacionados directamente.

El concepto Lifting State Up se utiliza para que dos Componentes hermanos puedan comunicarse utilizando el State del Componente Padre en común.

NewExpense modifica valor de State de App. Expenses renderiza el valor con Props

Consideraciones de actualización de State con useState

Cuando modificamos el State, el vitualDOM realiza las tareas de actualización correspondientes y se genera la nueva vista el DOM real. Hay que tener en cuenta que existe un momento, justo entre el proceso de actualización y la generación de la nueva vista, en que en la memoria está almacenado el valor que queremos modificar. Si trabajamos con funciones asincrónicas, esto puede generar un error en el que no se actualizan correctamente los valores de la vista. Para evitarlo, en lugar de usar el nuevo valor en la función actualizadora, le pasamos una función callback.

Ejemplos de Comunicación