React: Estados Contextuales
Cómo crear un hook de estados compartidos
En esta entrega vamos a ver cómo crear un hook para compartir estados entre componentes. Esto surge con la necesidad de compartir estados no heredados ni pasados como propiedades de los componentes. Una forma fácil pero tediosa a la larga es usar los contextos (useContext) debido a que debemos retener el estado y su ajustador, haciendo que los códigos queden bastantes feos.
Una forma elegante que he desarrollado es mandar a llamar el estado y su ajustador como lo haríamos con useState con la diferencia que todos los ajustadores y el valor son retenidos en una variable contextual que retiene los datos. Finalmente usando un identificador para cada ajustador y un efecto de limpieza obtenemos un hook bastante hermoso.
Sin más aquí el código.
Para utilizar el estado compartido es tan fácil como hacer.
Finalmente aquí podemos ver el código funcionando.
Observa que se han creado cuatro componentes: ViewName, EditName, ViewColor, EditColor. Los cuales utilizan estados contextuales o estados compartidos. El componente ViewName muestra el estado en la clave nombre, el componente ViewColor muestra el estado nombre y color. Finalmente los componentes editores ajustan los estados compartidos similarmente.
Conclusión
Los estados compartidos son muy útiles para compartir estados entre componentes independientes. Podemos definir variables contextuales que retengan por ejemplo datos de un formulario o varios a lo largo de la aplicación o simplemente crear variables contextuales que retengan la configuración de la aplicación y dicha configuración persista en todos los componentes.
La ventaja de utilizar estos estados contextuales es extender la dinámica clásica de usar estados a nivel componente, pero ahora a lo largo de múltiples componentes.
Si te gustó esta entrega no olvides aplaudir y comentar.
