React: Porqué usar Estados Contextuales (Compartidos)

Cómo romper la complejidad de los contextos

En la entrega anterior deEstados Contextuales vimos como crear un hook para crear estados compartidos. Vamos ahora a ver un ejemplo práctico del porqué deberíamos utilizar este nuevo hook frente al useContext.

En esta entrega vamos a realizar dos proyectos basados en el control de inicio de sesión de usuarios usando useContext y luego usando nuestro hookuseContextState.

Para poder definir una aplicación con inicio de sesión crearemos un contexto que retenga los datos del usuario que ha iniciado sesión (los simularemos), usando un hook que simule el inicio de sesión recibiendo las credenciales y devolviendo la información del usuario. Luego, todos los componentes dentro del contexto podrán acceder a los datos del usuario para jugar con ellos.

En el siguiente código se muestra el código completo del proyecto.

Observa cuidadosamente el código y presta atención a todos los componentes involucrados. Primero se define el contexto que retiene el usuario, luego el hook que ajusta el usuario con los datos que trae el api. Luego se crea un componente Home que determina si ya hay datos del usuario (extraídos del contexto) y sino muestra un formulario de captura, el cuál llama a su vez un componente intermedio para que consuma el api. Finalmente para inicializar el contexto creamos otro componente intermedio que retenga el estado del usuario y su ajustador y mande a crear el contexto con ese estado.

Aquí el ejemplo funcional.

En este proyecto creamos un lazo de componentes que consumen un api (algo común). Y podemos ver la complejidad del código.

Vamos a reconstruir el mismo proyecto ahora utilizando nuestros Estados Contextuales.

Observa atentamente el código para ver las diferencias respecto a la versión anterior.

1. Ya no se crea el contexto UserContext.
2. Ahora el hook useLogin es más objetivo respecto a dónde obtener y grabar los datos, lo que lo hace más potente ya que podría ser llamado en realidad desde cualquier componente que se mantenga vivo.
3. El componente LoginForm es más compacto y no depende de un componente intermedio llamado DoLogin. Recordemos que por cada componente sube la complejidad de modelado.
4. Aunque el componente Home mantiene su esencia, ahora es más robusto en el sentido que por cada contexto debemos llamar un estado extra y no a todo un contexto (evitamos routing).
5. Desaparece el horrendo componente intermedio MainContainer encargado de inicializar el contexto.
6. Llamamos directamente al componente Home simplificando la lógica.

A simple vista sólo hemos ahorrado 20 líneas de código entre ambos proyectos. Pero la complejidad de modelado se redujo drásticamente respecto a la segunda versión utilizando estados compartidos.

Finalmente puedes ver el proyecto aquí.

Conclusión

Los contextos en React fueron una buena estrategia para retener estados compartidos entre componentes no lineales y evitar el paso intensivo de propiedades, haciendo más dinámica la transversalidad de comunicación entre los componentes. Sin embargo, su diseño es muy primitivo para la integración exhaustiva con APIs ya que nos obliga por cada componente de captura crear un componente intermedio que haga el llamado a la API. También nos obliga a crear contenedores que retengan los estados iniciales del contexto haciendo muy difícil partir la lógica y reducirla, creando una maraña de componentes intermedios que no sirven en la formalización de la lógica y sólo estorban.

La respuesta elegante, es decir, el paladín de los estados será ahora useContextState y esperemos que pronto sea integrado como parte de los hooks principales de React. Por eso los invito a compartir el código y estas publicaciones para que lleguen a oídos de los programadores de react.

Si te gustó está entrega no olvides aplaudir y compartir.

Nos leemos pronto.