Tutorial React: Estado global con Context API

¿Qué es Context API?

Context API es una característica de React que permite compartir estado y funcionalidades entre componentes sin necesidad de pasar props de manera explícita en cada nivel de la jerarquía de componentes. Esto facilita la gestión del estado global en aplicaciones React de tamaño medio a grande, evitando el llamado "prop drilling".

Context API se compone de tres elementos principales: Contexto, Proveedor y Consumidor.

1. Contexto (Context): Es un objeto que React crea utilizando React.createContext(). Este objeto contiene dos componentes: Provider y Consumer.
2. Proveedor (Provider): Es un componente que proporciona el estado a sus componentes descendientes. Se utiliza para envolver los componentes que necesitan acceder al estado global. El Provider acepta una propiedad value que contiene el estado que se desea compartir.
3. Consumidor (Consumer): Es un componente que consume el estado proporcionado por el Provider. Existen dos formas principales de consumir el contexto: utilizando el componente Consumer o el hook useContext.

Creación de un Contexto

Para crear un contexto en React, primero es necesario importar y utilizar la función createContext desde el módulo de React. Este contexto servirá como un "contenedor" para el estado global que se desea compartir entre múltiples componentes.

import { createContext } from 'react';

const MiContexto = createContext();

Una vez creado el contexto, se necesita un Proveedor (Provider) para suministrar el estado global a los componentes descendientes. Este proveedor se implementa como un componente que envuelve a otros componentes y les proporciona acceso al estado a través de la propiedad value.

// MiContextoProvider.jsx
import { createContext, useState } from 'react';

export const MiContexto = createContext();

export default function MiContextoProvider({ children }) {
  const [estado, setEstado] = useState('valor inicial');

  return (
    <MiContexto.Provider value={{ estado, setEstado }}>
      {children}
    </MiContexto.Provider>
  );
}

En este ejemplo, MiContextoProvider es un componente que utiliza el hook useState para manejar el estado local estado y la función setEstado para actualizarlo. Este estado se pasa al Provider a través de la propiedad value, permitiendo que los componentes descendientes puedan acceder y modificar este estado global.

Para utilizar este contexto en otros componentes, se debe envolver la jerarquía de componentes con el MiContextoProvider en el archivo principal de la aplicación, generalmente App.jsx.

// App.jsx
import MiContextoProvider from './components/MiContextoProvider/MiContextoProvider';
import ComponenteConsumidor from './components/ComponenteConsumidor/ComponenteConsumidor';

export default function App() {
  return (
    <MiContextoProvider>
      <ComponenteConsumidor />
    </MiContextoProvider>
  );
}

Con esto, todos los componentes descendientes de MiContextoProvider tienen acceso al estado global definido en el contexto. Para consumir este estado en un componente, se puede utilizar el hook useContext de React.

Consumir un contexto

Una vez que se ha creado y proporcionado un contexto mediante un Provider, el siguiente paso es consumir ese contexto en los componentes que lo necesiten. React ofrece dos métodos principales para consumir un contexto: mediante el hook useContext o el componente Consumer. La opción más común y recomendada en aplicaciones modernas es el uso del hook useContext debido a su simplicidad y claridad.

Para consumir un contexto utilizando el hook useContext, primero se debe importar useContext y el contexto que se desea utilizar. Luego, se llama a useContext pasándole el contexto como argumento. Esto devuelve el valor actual del contexto, que incluye el estado y las funciones para actualizarlo.

// ComponenteConsumidor.jsx
import { useContext } from 'react';
import { MiContexto } from '../MiContextoProvider/MiContextoProvider';

export default function ComponenteConsumidor() {
  const { estado, setEstado } = useContext(MiContexto);

  return (
    <div>
      <p>{estado}</p>
      <button onClick={() => setEstado('nuevo valor')}>Cambiar Estado</button>
    </div>
  );
}

En este ejemplo, ComponenteConsumidor utiliza useContext para acceder al contexto MiContexto. La llamada a useContext(MiContexto) devuelve el valor actual del contexto, que en este caso es un objeto con las propiedades estado y setEstado. Estas propiedades se pueden utilizar dentro del componente para leer y actualizar el estado global.

Otra forma de consumir un contexto es utilizando el componente Consumer, aunque es menos común en aplicaciones modernas debido a su verbosidad.

Ejemplo de cómo se haría utilizando Consumer:

// ComponenteConsumidor.jsx
import { MiContexto } from '../MiContextoProvider/MiContextoProvider';

export default function ComponenteConsumidor() {
  return (
    <MiContexto.Consumer>
      {({ estado, setEstado }) => (
        <div>
          <p>{estado}</p>
          <button onClick={() => setEstado('nuevo valor')}>Cambiar Estado</button>
        </div>
      )}
    </MiContexto.Consumer>
  );
}

En este ejemplo, ComponenteConsumidor utiliza el componente Consumer para acceder al contexto MiContexto. El Consumer espera una función como hijo, que recibe el valor actual del contexto y devuelve un nodo de React. Este enfoque puede ser útil en casos donde se necesita acceder al contexto dentro de una clase de componente, pero generalmente se prefiere el uso de useContext en componentes funcionales.

Es importante tener en cuenta que cada vez que el valor del contexto cambia, todos los componentes que consumen ese contexto se volverán a renderizar. Esto puede tener implicaciones de rendimiento en aplicaciones grandes, por lo que es recomendable optimizar el uso de contextos dividiendo el estado global en múltiples contextos más pequeños si es necesario.

Manejo de estado global con Context API

El manejo de estado global con Context API en React es una técnica avanzada que permite compartir el estado y las funcionalidades entre múltiples componentes de una aplicación sin necesidad de pasar props manualmente a través de la jerarquía de componentes. A continuación, se detallan los pasos y consideraciones para gestionar el estado global utilizando Context API.

Para manejar el estado global de manera efectiva, se recomienda seguir estos pasos:

1. Definir el contexto y el proveedor: Crear un contexto y un proveedor que se encargue de gestionar el estado global. El proveedor debe envolver a los componentes que necesitan acceso al estado global.
2. Consumir el contexto en los componentes: Utilizar el hook useContext para acceder y manipular el estado global desde los componentes que lo necesiten.

Ejemplo completo de cómo manejar el estado global utilizando Context API en React:

// EstadoGlobalProvider.jsx
import { createContext, useState } from 'react';

// Crear el contexto
export const EstadoGlobalContext = createContext();

// Definir el proveedor del contexto
export default function EstadoGlobalProvider({ children }) {
  const [estadoGlobal, setEstadoGlobal] = useState({
    usuario: null,
    tema: 'claro',
  });

  return (
    <EstadoGlobalContext.Provider value={{ estadoGlobal, setEstadoGlobal }}>
      {children}
    </EstadoGlobalContext.Provider>
  );
}

En este ejemplo, EstadoGlobalProvider es el componente que proporciona el estado global a sus componentes descendientes. El estado global contiene dos propiedades: usuario y tema. La función setEstadoGlobal permite actualizar este estado global.

Para consumir el contexto en un componente, se utiliza el hook useContext:

// ComponenteEjemplo.jsx
import { useContext } from 'react';
import { EstadoGlobalContext } from '../EstadoGlobalProvider/EstadoGlobalProvider';

export default function ComponenteEjemplo() {
  const { estadoGlobal, setEstadoGlobal } = useContext(EstadoGlobalContext);

  const cambiarTema = () => {
    setEstadoGlobal((prevEstado) => ({
      ...prevEstado,
      tema: prevEstado.tema === 'claro' ? 'oscuro' : 'claro',
    }));
  };

  return (
    <div>
      <p>Tema actual: {estadoGlobal.tema}</p>
      <button onClick={cambiarTema}>Cambiar Tema</button>
    </div>
  );
}

En este componente, ComponenteEjemplo utiliza useContext para acceder al contexto EstadoGlobalContext. La función cambiarTema actualiza el estado global cambiando el valor de tema.

Finalmente, para aplicar el proveedor en la jerarquía de componentes, se envuelve la aplicación con EstadoGlobalProvider:

// App.jsx
import EstadoGlobalProvider from './components/EstadoGlobalProvider/EstadoGlobalProvider';
import ComponenteEjemplo from './components/ComponenteEjemplo/ComponenteEjemplo';

export default function App() {
  return (
    <EstadoGlobalProvider>
      <ComponenteEjemplo />
    </EstadoGlobalProvider>
  );
}

Con esta configuración, todos los componentes descendientes de EstadoGlobalProvider tendrán acceso al estado global definido en el contexto. Esto permite gestionar de manera eficiente el estado global en una aplicación React, evitando la necesidad de pasar props manualmente a través de múltiples niveles de la jerarquía de componentes.

Es importante tener en cuenta algunas consideraciones de rendimiento al utilizar Context API:

• Re-renderizados innecesarios: Cada vez que el valor del contexto cambia, todos los componentes que consumen ese contexto se vuelven a renderizar. Para mitigar esto, es posible dividir el estado global en múltiples contextos más pequeños según sea necesario.
• Memoización: Utilizar hooks como useMemo y useCallback para memoizar valores y funciones que se pasan a través del contexto, reduciendo así los re-renderizados innecesarios.