La Context API de React es una herramienta poderosa para gestionar estados globales. Permite compartir datos entre múltiples componentes sin necesidad de pasar props manualmente en cada nivel del árbol de componentes.

¿Qué es la Context API?

La Context API es una característica integrada en React que permite:

• Evitar el "prop drilling": No es necesario pasar props por múltiples niveles intermedios.
• Simplificar la estructura del código: Los datos se comparten directamente desde un proveedor (provider) a los consumidores (consumers).

Se utiliza para estados globales como temas de color, autenticación de usuarios o configuraciones compartidas.

Estructura básica de Context API

La Context API sigue tres pasos principales:

1. Crear un contexto:

   import { createContext } from 'react';
   
   const UserContext = createContext();
   export default UserContext;
   
   

2. Proveer el contexto:

   import React from 'react';
   import UserContext from './UserContext';
   
   function App() {
     const user = { name: 'Juan', role: 'Admin' };
   
     return (
       <UserContext.Provider value={user}>
         <ChildComponent />
       </UserContext.Provider>
     );
   }
   
   

3. Consumir el contexto:

   import React, { useContext } from 'react';
   import UserContext from './UserContext';
   
   function ChildComponent() {
     const user = useContext(UserContext);
   
     return <p>Bienvenido, {user.name} ({user.role})</p>;
   }
   
   

useContext vs. Consumer

En versiones modernas de React, el hook useContext simplifica el acceso al contexto, eliminando la necesidad de un componente <Consumer>.

Ejemplo con Consumer (forma antigua):

import React from 'react';
import UserContext from './UserContext';

function ChildComponent() {
  return (
    <UserContext.Consumer>
      {(user) => <p>Bienvenido, {user.name}</p>}
    </UserContext.Consumer>
  );
}

Ejemplo con useContext (forma moderna):

import React, { useContext } from 'react';
import UserContext from './UserContext';

function ChildComponent() {
  const user = useContext(UserContext);
  return <p>Bienvenido, {user.name}</p>;
}