¿Qué es useContext en React?

useContext es un hook en React que permite a los componentes funcionales suscribirse a los cambios en el contexto. Proporciona una forma de pasar datos a través del árbol de componentes sin necesidad de pasar explícitamente props en cada nivel.

Principio de funcionamiento:

1. Creación del contexto: Se utiliza React.createContext() para crear un objeto de contexto. Este objeto contiene un Provider y un Consumer (o se usa useContext en componentes funcionales).
2. Proporcionar valor: El componente Provider del contexto envuelve el árbol de componentes que necesitan acceder al valor. A través de la prop value se pasa el valor que estará disponible para todos los componentes suscritos.
3. Obtener valor: useContext(MyContext) se llama dentro de un componente funcional, donde MyContext es el contexto creado previamente. El hook devuelve el valor actual del contexto. Cuando el valor del contexto cambia, el componente que usa useContext se vuelve a renderizar automáticamente.

Ventajas:

• Facilidad para pasar datos: Elimina la necesidad de "prop drilling" a través de múltiples componentes intermedios.
• Estado global: Es útil para gestionar el estado global de la aplicación (por ejemplo, tema, autenticación, localización).
• Rendimiento: React optimiza el renderizado de los componentes que usan useContext, re-renderizando solo aquellos que están suscritos a los cambios en ese contexto.

Desventajas:

• Dificultad para depurar: Puede ser más difícil rastrear de dónde proviene el valor del contexto en comparación con los props.
• Rendimiento con actualizaciones frecuentes: Si el valor del contexto se actualiza muy a menudo, puede llevar a re-renderizados frecuentes de todos los componentes suscritos.

Ejemplo:

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

// 1. Creación del contexto
const ThemeContext = createContext('light');

// Componente proveedor
function ThemeProvider({ children }) {
  const theme = 'dark'; // Valor de ejemplo
  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
}

// Componente que usa el contexto
function ThemedComponent() {
  // 3. Obtener el valor del contexto
  const theme = useContext(ThemeContext);
  return <div style={{ background: theme === 'dark' ? '#333' : '#fff', color: theme === 'dark' ? '#fff' : '#000' }}>Tema: {theme}</div>;
}

// Uso
function App() {
  return (
    <ThemeProvider> {/* 2. Proporcionar valor */}
      <ThemedComponent />
    </ThemeProvider>
  );
}

export default App;