No es una sorpresa para nadie que React acapara todas las miradas de la comunidad frontend desde hace ya unos años. La llegada de los hooks fue un antes y un después en los componentes funcionales y su aplicación en la industria no ha parado de crecer. Hoy vamos a hablar de React Context, una herramienta para gestionar estados globales, tan apreciada como controvertida.
Hay ocasiones donde queremos que nuestra información llegue a diversos componentes. Lo primero que hay que destacar es que no es algo negativo que usemos las props para pasar la información de arriba a abajo.
El problema más bien viene cuando en nuestro árbol de componentes, estamos pasando información a través de componentes que realmente no la consumen, solo la pasan. O también cuando estos datos son necesarios en la práctica totalidad de los componentes de la aplicación y tenemos que pasarlos por muchos subcomponentes.
Los contextos cuentan con dos partes fundamentales. Un provider, que es quien provee a los componentes que tiene por debajo de un estado global. Y de uno o varios consumer, que son los componentes que consumirán estos datos.
Vamos a utilizar el ejemplo de una aplicación donde para cambiar el tema visual, crearemos un contexto. Para utilizar buenas prácticas, vamos a crear un HOC, también conocido como High Order Component. Que se va a llamar ThemeProvider.
Esto nos permitirá que nuestro contexto sea reutilizable, y lo podamos colocar de wrapper para todos aquellos componentes hijos que queramos.
Primero hay que crear el contexto mediante el método createContext()
Después creamos el componente ThemeProvider que recibe por props los componentes children a los que compartirá el contexto.
Si queremos que nuestro estado global sea read only, nos bastará con pasar al provider como valor un objeto. Pero en este caso queremos que cada componente, pueda actualizar también el tema global de la aplicación.
Esto quiere decir que cada componente será capaz de leer, pero también de modificar el estado global del tema. Es por ello que es necesario utilizar el hook useState. Este se compone de una variable que define el estado actual del tema y también de una función (setTheme) que permite actualizar ese estado.
Por tanto, el último paso que nos queda, es mandar al provider este estado. El provider en su atributo value es el que recibe estos datos. Es importante saber que solo admite objetos, por tanto, para pasar nuestro useState, tenemos que colocarlo dentro del objeto “providerValue”.
Ahora ya podemos irnos a nuestro lugar de la aplicación donde vamos a envolver aquellos componentes que usarán el estado global del contexto. En este caso, el componente List y el componente Toggle.
Solo hay que importar el componente ThemeProvider colocarlo en el render como el padre de los elementos que queramos que comparta el estado global.
Todavía nos queda una parte importante, que es definir cómo los componentes van a consumir el contexto que hemos creado. La forma básica de hacerlo sería esta.
En cada componente habría que seguir estos puntos:
Realizar esta operación en cada uno de los componentes donde se va a utilizar el contexto es bastante ineficiente, por eso tenemos la oportunidad de hacerlo mejor.
Los custom hook son una de las herramientas que trae react para poder crear nuestros propios hooks. Es útil especialmente a la hora de poder reutilizar lógica que se repite en nuestra aplicación. Es decir, encaja perfectamente en una de nuestras necesidades.
Con estas tres líneas podemos simplificar el consumidor del contexto. De este modo, solo necesitaremos llamar al custom hook useThemeContext() desde el componente para tener acceso al contexto.
Al principio de este artículo comentábamos que también había contras en la utilización del useContext. Creo que es importante entender que no es correcto abusar de este hook para la creación de estados. Siempre tiene que haber una casuística que respalde la necesidad de crearlo.
Si no controlamos bien el alcance del contexto nos podemos encontrar con problemas de rendimiento en nuestra aplicación. Por defecto, cada vez que actualicemos el contexto, provocará que todos los componentes que lo consuman se vuelvan a renderizar.
Esto es un contra muy importante, es por eso que debemos de ser conscientes de estas limitaciones, aquí van una serie de consejos que es conveniente evaluar previamente:
ifgeekthen.nttdata.com es un blog del grupo NTT DATA. Un proyecto que busca compartir con profesionales del mundo digital temas relacionados con la tecnología y el universo geek.
