El mundo de la programación es muy amplio, con lenguajes y herramientas que se actualizan todo el tiempo. Dentro de estos lenguajes, existen distintos elementos que nos permiten ejecutar todo tipo de acciones. Sin embargo, no todo elemento debe usarse solo porque está disponible en un lenguaje. Por ello, en este post, te enseñaremos cuándo usar contexto en React para que lo emplees correctamente en tus aplicaciones.
¿Qué es el contexto en React?
El contexto es un elemento que podemos crear en React para establecer una comunicación directa entre un componente en un nivel muy alto y uno en un nivel mucho más bajo. En este sentido, es un atajo que nos permite evitar el paso de props por todos los componentes intermedios, algo que sucede cuando queremos comunicar padres a hijos en React. Entonces, para crear una comunicación más directa, el contexto se conforma de dos componentes: un proveedor de datos (ContextProvider) y un consumidor de datos (ContextConsumer).
Mientras que el proveedor recoge los datos que queremos comunicar, el consumidor se ubica en el componente que los quiere recibir y los llama. Para conocer más sobre este concepto, te invitamos a leer nuestro post sobre contexto en React.
Ahora, aunque el contexto es un atajo muy útil que parece ser bueno para todos los casos, la realidad es que es mejor utilizarlo en situaciones específicas. A continuación, te explicamos exactamente cuándo usar contexto en React.
¿Cuándo usar contexto en React?
Aunque el contexto es un atajo muy útil para todo tipo de comunicación entre componentes, basar una aplicación completamente en el contexto puede ser un movimiento arriesgado. Esto se debe a que, si no lo manejamos bien, podemos estar provocando un render en componentes que no queremos. En este sentido, el performance de nuestra aplicación puede verse afectado.
Entonces, ¿cuándo usar contexto en React? La recomendación desde el equipo React es que lo utilicemos en eventos muy concretos. Sobre todo en situaciones en las que el estado no esté continuamente cambiando ni sea algo demasiado dinámico. En este sentido, un buen ejemplo para usar un contexto es un estado que defina el inicio de sesión. Algo como lo que creamos en nuestro post sobre controlar estado login en React, un estado que cambia pocas veces en el transcurso de nuestra aplicación.
La razón detrás de esta regla para definir cuándo usar contexto en React es que, si tenemos un estado dinámico a nivel alto de nuestra aplicación, estaremos provocando un render de toda la aplicación cada vez que se actualiza. Entonces, si no utilizamos bien el contexto, podemos estar provocando render en componentes que no queremos, incluso si no están conectados al contexto. Por ello, es mejor que el estado que comunicamos con el contexto tenga pocos cambios de valor en el transcurso de su uso.
Otro momento ideal para usar contexto en React es cuando tenemos un estado que controla el look de nuestra aplicación. Es decir, cuando nuestra aplicación tiene un modo light o luminoso y un modo dark u oscuro, que pueden controlarse mediante un estado. En estos casos, necesitamos un estado que afecte la aplicación a nivel global. Sin embargo, este estado cambiará pocas veces en el transcurso del camino del usuario. Por ello, es ideal para usar contexto en React.
Recuerda que el contexto no es un manipulador de estado, sino un repartidor de datos. Es decir, no solo funciona para comunicar estados entre componentes. Por ello, podrás poner cualquier dato del contexto, incluso llamar a una API. En este sentido, te recomendamos que todos los datos que pases, sean o no estados, no estén cambiando continuamente.
Si lo que quieres es manejar el estado de la aplicación de una manera predecible, te recomendamos inspeccionar Redux. Esta arquitectura nos permite manipular el estado al igual que repartirlo a lo largo de nuestra aplicación.
¿Quieres seguir aprendiendo?
Ahora que sabes cuándo usar contexto en React, ¡es momento de utilizarlo en los datos globales de tu aplicación! Si quieres seguir aprendiendo sobre la creación de todo tipo de proyectos de programación para la web, te invitamos a ser parte de nuestro Desarrollo Web Full Stack Bootcamp, nuestro programa de formación intensiva dedicado especialmente para quienes sueñan con ser desarrolladores web. En este bootcamp, aprenderás a desarrollar proyectos con lenguajes y herramientas como JavaScript, HTML, CSS y JSX. ¿Quieres seguir aprendiendo con nosotros? ¡Inscríbete ya y cambia tu vida!
