Manejar información compartida entre componentes en React se vuelve complejo cuando pasas props de un nivel a otro. Con Context API puedes crear un estado global accesible desde cualquier componente, sin importar qué tan profundo esté en el árbol. Aquí verás cómo construir un cambiador de tema light/dark que ilustra el patrón completo.

¿Qué es Context API y para qué sirve en React?

Context API es la herramienta nativa de React que permite compartir datos entre componentes sin pasarlos manualmente por props en cada nivel. Funciona como un canal de comunicación global al que cualquier componente puede suscribirse.

¿Qué es un estado global en React? Es información que vive fuera de un componente específico y puede ser leída o modificada por cualquier componente que la necesite, sin importar su ubicación en el árbol.

En la práctica, lo usas cuando varios componentes alejados entre sí dependen del mismo dato: un tema visual, el usuario autenticado, el idioma de la app o el contenido de un carrito.

¿Cómo crear el contexto y el proveedor paso a paso?

Todo arranca con la función createContext importada desde React [01:20]. Esta función devuelve un objeto que contiene dos piezas clave: un Provider y un Consumer. Tú vas a usar el Provider para envolver los componentes que necesiten acceder al estado.

jsx import { createContext, useState, useContext } from 'react';

const ThemeContext = createContext();

El siguiente paso es construir un componente proveedor que actúe como wrapper. Este componente guarda el estado local con useState y expone tanto el valor como las funciones para modificarlo [02:10].

jsx function ThemeProvider({ children }) { const [theme, setTheme] = useState('light');

const toggleTheme = () => { setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light'); };

return ( <ThemeContext.Provider value={{ theme, toggleTheme }}> {children} </ThemeContext.Provider> ); }

¿Por qué se usa la prop children en el provider?

La prop children representa cualquier componente o conjunto de componentes que envuelvas dentro del proveedor. Gracias a ella, el ThemeProvider puede encapsular toda tu aplicación o solo una parte, y todo lo que esté adentro tendrá acceso al estado global.

¿Cómo funciona el patrón de actualización con prevTheme?

Dentro de toggleTheme usas el valor previo del estado (prevTheme) para decidir el nuevo. Si el tema actual es light, lo cambia a dark, y viceversa. Este patrón garantiza que la actualización siempre parta del estado más reciente.

¿Cómo consumir el contexto desde un componente con useContext?

Para leer el estado global necesitas el hook useContext, al que le pasas el contexto que creaste antes [04:30]. Este hook te devuelve exactamente el objeto que pusiste en la prop value del Provider.

jsx function ThemeButton() { const { theme, toggleTheme } = useContext(ThemeContext);

return ( <button onClick={toggleTheme} style={{ backgroundColor: theme === 'light' ? '#ffffff' : '#222222', color: theme === 'light' ? '#000000' : '#ffffff' }} > Cambiar tema </button> ); }

Fíjate en un detalle importante: en el onClick no necesitas envolver toggleTheme en una arrow function, porque ya es una función lista para ejecutarse. Esto mantiene el código más limpio.

¿Cuándo debo usar useContext en lugar de props? Úsalo cuando varios componentes en distintos niveles necesitan el mismo dato y pasarlo por props se vuelve repetitivo. Para datos locales o de un solo nivel, las props siguen siendo la mejor opción.

¿Cómo conectar todo dentro de App?

El último paso es montar el proveedor en el punto de entrada de tu aplicación, normalmente el componente App. Todo lo que pongas dentro del ThemeProvider podrá consumir el estado.

jsx function App() { return ( <ThemeProvider> <ThemeButton /> </ThemeProvider> ); }

Al guardar y recargar el navegador, verás un botón con fondo blanco y texto negro, porque el valor inicial del tema es light. Al hacer clic, el fondo cambia a oscuro y el texto a blanco, demostrando que el estado global se actualiza y el componente se vuelve a renderizar con los nuevos valores.

¿Qué herramientas de React necesitas para este patrón?

• createContext para definir el contexto.
• useState para almacenar el valor dentro del proveedor.
• useContext para consumir el contexto desde cualquier componente hijo.

Con estas tres piezas tienes la base para escalar el patrón a temas más complejos: autenticación, preferencias de usuario o cualquier dato compartido. ¿Qué estado global te gustaría implementar primero en tu proyecto? Cuéntame en los comentarios.