useContext, React.js

useContext es un hook de React que permite a los componentes acceder a un contexto específico, sin tener que pasar explícitamente los datos a través de props.

El contexto en React es una forma de compartir datos entre componentes que se encuentran en diferentes niveles de anidamiento en la jerarquía del árbol de componentes.

Para utilizar useContext, primero se debe crear un contexto utilizando React.createContext. Luego, se puede proporcionar un valor para ese contexto utilizando el componente Context.Provider. Por último, los componentes que deseen acceder a ese valor pueden utilizar useContext para consumirlo.

Las ventajas de usar useContext incluyen:

• Evita la prop drilling: con useContext, los componentes pueden acceder a datos compartidos sin necesidad de pasar explícitamente los datos a través de props.
• Facilita la reutilización del código: el uso de useContext permite la creación de componentes que pueden ser utilizados en diferentes contextos, lo que hace que el código sea más modular y reutilizable.
• Reduce la complejidad: con useContext, los componentes pueden acceder a los datos que necesitan sin tener que preocuparse por la estructura de los componentes que se encuentran en medio.

Veamos un ejemplo en donde podemos utilizar useContext, como el tema de una aplicación:

En este ejemplo, se utiliza useContext para proporcionar un tema a la aplicación. El usuario puede cambiar el tema haciendo clic en un botón, y la aplicación cambiará de tema en consecuencia.

El componente ThemeProvider actúa como proveedor de contexto, permitiendo que los componentes hijos accedan al tema actual y a la función toggleTheme para cambiar el tema.

En esta sección, se importa el componente Background desde el archivo ./component/Background. Este componente define la lógica y la interfaz de usuario.

1. Se importan las dependencias necesarias: createContext y useState de React para trabajar con el contexto y el estado de la aplicación, y PropTypes para validar los tipos de los props
2. Se define el objeto themes que contiene dos temas: light y dark.
3. Se exporta el objeto ThemeContext creado mediante createContext. El valor inicial del contexto se establece en themes.dark.
4. El componente ThemeProvider es un componente de función que recibe un prop children y se encarga de gestionar el estado del tema y proporcionar el contexto a sus componentes hijos. Utiliza el hook useState para definir el estado del tema y la función toggleTheme para cambiar entre los temas light y dark.

1. Se importan las dependencias necesarias. useContext se utiliza para acceder al contexto de tema y useState se utiliza para manejar el estado del checkbox.
2. El componente Background es una función que retorna una estructura de elementos JSX. En este componente se utiliza el contexto de tema (ThemeContext) para obtener el objeto theme y la función toggleTheme que se proporcionan a través del useContext. También se utiliza el useState para manejar el estado del checkbox, con un valor inicial de true en isChecked.
3. Dentro del return, se renderiza un div con clases CSS dinámicas ${theme.background} y ${theme.color} para aplicar el estilo de fondo y color del tema actual.
4. En el siguiente div, se utiliza la clase CSS de Tailwind CSS flex justify-center para alinear horizontalmente el contenido. Dentro de este div, se renderiza un input de tipo checkbox con la clase CSS "toggle". La propiedad checked se establece en el valor de isChecked para reflejar el estado del checkbox, y se asigna la función handleCheckboxChange al evento onChange para manejar el cambio de estado del checkbox y llamar a toggleTheme().

Para finalizar, el componente Background utiliza el contexto de tema para aplicar estilos dinámicos de fondo y color, y cambia entre el modo claro y oscuro cuando el usuario interactúa con el checkbox. Este componente proporciona una interfaz de usuario para habilitar y deshabilitar el modo de tema en la aplicación.

link del código

Para mas información revisa la documentación oficial de useContext:

Esta documentación proporciona información detallada sobre cómo utilizar useContext en React, ejemplos de uso, consideraciones y pautas recomendadas.