Context API en React: Gestión de Estado Global

La gestión del estado global es uno de los desafíos más comunes en el desarrollo de aplicaciones React. Aunque Redux es una solución popular, la Context API de React ofrece una alternativa integrada y más sencilla para manejar el estado global. En este post, exploraremos cómo usar la Context API en React para gestionar el estado global de manera eficiente, con ejemplos prácticos para ilustrar su uso.

Desarrollo del tema

¿Qué es la Context API?

La Context API es una forma de pasar datos a través de la árbol de componentes sin tener que pasar props manualmente en cada nivel. Es útil para compartir datos que son considerados “globales” para una aplicación, como el usuario autenticado, el tema de la interfaz o el idioma.

Crear un Contexto

El primer paso es crear un contexto. Esto se hace usando React.createContext.

import React, { createContext } from 'react';

const ThemeContext = createContext('light');

Proveedor de Contexto

El proveedor de contexto (Provider) permite a los componentes descendientes suscribirse a cambios en el contexto. Se coloca en un nivel alto del componente donde se necesita proporcionar el contexto.

import React, { createContext, useState } from 'react';

const ThemeContext = createContext('light');

function App() {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={theme}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

Consumidor de Contexto

El consumidor de contexto (Consumer) es un componente que suscribe a cambios en el contexto. Puede ser usado en cualquier componente descendiente del proveedor.

import React, { useContext } from 'react';

const ThemeContext = createContext('light');

function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  const theme = useContext(ThemeContext);

  return (
    <button style={{ background: theme === 'dark' ? '#333' : '#FFF' }}>
      Tema: {theme}
    </button>
  );
}

Ejemplo Completo

A continuación, un ejemplo completo que combina la creación, el proveedor y el consumidor de un contexto.

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

const ThemeContext = createContext('light');

function App() {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={theme}>
      <Toolbar />
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        Cambiar Tema
      </button>
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  const theme = useContext(ThemeContext);

  return (
    <button style={{ background: theme === 'dark' ? '#333' : '#FFF' }}>
      Tema: {theme}
    </button>
  );
}

export default App;

Conclusión

La Context API de React proporciona una solución sencilla y eficaz para la gestión del estado global en aplicaciones React. Es una excelente opción para aquellos que buscan una alternativa a Redux o para proyectos donde la gestión del estado es más simple. Con esta guía, ahora tienes las herramientas necesarias para empezar a utilizar la Context API en tus proyectos de React.