Primero que todo veamos que es lo que dice react acerca de Context,
“Context provee una forma de pasar datos a través del árbol de componentes sin tener que pasar props manualmente en cada nivel.”
Bueno con esto ya tenemos un panorama corto acerca del tema, y se nos pueden venir a la mente ciertos casos de uso, el problema surge cuando pasar un prop se vuelve muy repetitivo, o es algo muy generalizado por así decirlo, dentro del mundo de los frameworks es normal pensar en componentes algo así como un componente lista tiene en dentro un componente ítem, pedir la data dentro del componente lista sería una buena solución y desplegarla en cada ítem, pero si nos ponemos a pensar en un componente que tiene muchos componentes anidados y requieren acceder a esos datos , eso se vuelve una locura 😖, (imaginemos que por ahora que no existe redux si no ya sabes de redux no hay problema 🤫) bueno en casos como esos es muy útil Context.
Al código 🙂
Primero empecemos con un ejemplo sencillo , este ejemplo también está en la documentación de react, pero aquí le hice unas cuantas modificaciones, por cierto los ejemplos siguientes están en typescript, y next js dicho esto , empecemos
Imagina que una página web existen distintos temas ya sea el Dark Mode u otros temas , todos nuestros componentes tienen que poder consumir nuestro tema actual, y por ende se puede cambiar el tema. desde cualquier componente.Primero escribamos algunos tipos.
Bien ahora entra en participación Context:
En esta línea de código hemos creado un contexto este solo cuenta de dos propiedades, el tema que estamos usando actualmente y una función que actualiza el tema , este contexto ha sido inicializado en undefined , ¿Pero por qué existe este símbolo al final! 🤔?.
Este en typescript es Non-null Assertion Operator que lo que hace es remover el el null y el undefined de nuestro tipo , en otras palabras le estamos dicieno a typescript que undefined no es undefined 😁 , la necesidad de hacer esto es por que createContext recibe un valo que es la inicialización , pero hasta aqui todavia no existe la funcion toggleTheme y si se le pasara undefined esto daria un error.
Ahora lo siguiente en nuestro código es declarar el componente provider que le permitirá a los componentes hijos poder consumir el context , este componente se encuentra dentro del mismo contexto.
Podríamos haber puesto el provider directamente en el componente más alto de acuerdo a nuestra lógica, pero este enfoque nos permite poder separar la lógica
El componente provider recibe un propiedad value que no es nada más que los datos que se van a pasar en ese árbol de componentes, para eso agregaremos unas cuantas líneas más.
Ahora que ya cobra sentido la función toggleTheme que este caso de acuerdo al parámetro cambiara nuestro tema y se actualizara.
Hasta aquí está casi todo listo lo único que falta es usar nuestro provider.
En caso como es el “tema” de nuestra aplicación comúnmente esto estaría en un nivel superior en este caso va a estar disponible para toda la aplicación, ahora volvamos un momento a escribir unos hooks para poder consumir más rápido el contexto.
Ahora usemos esto en un componente…
Demo 😁
Conclusión:
Podemos usar useContext para poder elevar ciertos datos que va a hacer utilizados por diferentes componentes, podemos pasar funciones que actualizan estos datos.
Escribi otro ejemplo sobre useContext pero no avance a redactar el tutorial, puedes ver el ejemplo completo en : https://github.com/leobar37/next-ts-react-tutorials/tree/main
