Como utilizar useContext en React de manera sencilla [ESP/ENG]

Hoy vengo a compartir con la comunidad de los desarrolladores cómo utilizar un contexto de react.
Por lo general la mayoría utilizamos un contexto de manera global y evitamos utilizarlo de manera más pequeña esto a veces puede ser un error de aprendizaje porque en realidad los contextos para compartir valores variables diferentes tipos de datos a través de la aplicación pueden tener El alcance que cada uno desee.
Este alcance que a veces necesitamos no requiere que engloba toda la aplicación sino a ciertos archivos por lo tanto imagina que tienes dos carpetas separadas y necesitas compartir un valor entre ambas carpetas que a la vez ese valor produzca nuevos renderizados por lo tanto la acción más sencilla sería tener una variable a nivel global fuera de la carpetas pero con useContext puedes simplificar tu trabajo creando un contexto que englobe ambas carpetas permitiendo que entre ellas se puedan intercambiar ciertos datos sin necesidad de creer importaciones en todo tiempo.

Today I come to share with the developer community how to use a react context. In general, most of us use a context globally and avoid using it in a smaller way, this can sometimes be a learning error because in reality the contexts to share variable values ​​​​different types of data through the application can have the scope that each one wishes. This scope that we sometimes need does not require that it encompasses the entire application but rather certain files, therefore imagine that you have two separate folders and you need to share a value between both folders that at the same time that value produces new renderings, therefore the simplest action It would be having a global variable outside the folders, but with useContext you can simplify your work by creating a context that encompasses both folders, allowing certain data to be exchanged between them without the need to create imports at all times.

En este ejemplo que va a mostrar es muy sencillo lo único que necesita mi aplicación era compartir un contexto con archivos que generan animaciones a través de canvas esto se podría haber solucionado utilizando un simple estado y enviándolo como propiedad pero decidí que era mucho más óptimo utilizar un contexto que simplemente reciba una cadena de texto y la función que altera esa cadena de texto de manera que en donde utilizo la animación puede estar percibiendo los cambios en esa cadena de texto y renderizar en el instante.

In this example that is going to show, it is very simple, the only thing my application needs was to share a context with files that generate animations through canvas. This could have been solved using a simple state and sending it as a property, but I decided that it was much more optimal to use a context that simply receives a string of text and the function that alters that string of text so that where I use animation it can be aware of the changes in that string of text and render on the fly.