El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

El hook useContext es una herramienta poderosa en React que permite a los componentes acceder a valores de contexto sin necesidad de pasar props manualmente a través de cada nivel del árbol de componentes. Esto es especialmente útil para compartir datos que son "globales" para una aplicación, como el tema de la interfaz de usuario, el idioma, o la autenticación del usuario.

¿Qué es el Contexto en React?

El contexto en React proporciona una forma de pasar datos a través del árbol de componentes sin tener que pasar props manualmente en cada nivel. Esto es útil para datos que deben ser accesibles por muchos componentes a diferentes niveles de la jerarquía.

Creación de un Contexto

Para crear un contexto, utilizamos la función createContext de React. Aquí hay un ejemplo básico:

import React, { createContext } from 'react';

// Crear un contexto con un valor predeterminado
const ThemeContext = createContext('light');

Proveedor de Contexto

El proveedor de contexto (Provider) es un componente que envuelve a otros componentes y les proporciona el valor del contexto. Aquí hay un ejemplo de cómo usar el proveedor de contexto:

import React, { createContext } from 'react';

// Crear un contexto con un valor predeterminado
const ThemeContext = createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

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

Consumidor de Contexto

Antes de los hooks, los componentes de clase utilizaban el consumidor de contexto (Consumer) para acceder al valor del contexto:

function ThemedButton() {
  return (
    <ThemeContext.Consumer>
      {value => <button theme={value}>I am styled by theme context!</button>}
    </ThemeContext.Consumer>
  );
}

Uso del Hook useContext

El hook useContext simplifica el acceso al contexto en componentes funcionales. En lugar de usar un consumidor, simplemente llamamos a useContext con el contexto que queremos usar.

Ejemplo Práctico

Vamos a reescribir el ejemplo anterior utilizando el hook useContext:

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

// Crear un contexto con un valor predeterminado
const ThemeContext = createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

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

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button theme={theme}>I am styled by theme context!</button>;
}

Explicación del Código

Creación del Contexto: Creamos un contexto llamado ThemeContext con un valor predeterminado de 'light'.
Proveedor de Contexto: En el componente App, envolvemos el componente Toolbar con ThemeContext.Provider y le pasamos el valor 'dark'.
Uso del Hook useContext: En el componente ThemedButton, utilizamos el hook useContext para acceder al valor del contexto ThemeContext.

Ejercicio Práctico

Objetivo: Crear una aplicación que utilice useContext para gestionar el tema (claro/oscuro) de la interfaz de usuario.

Crear el Contexto: Crea un contexto llamado ThemeContext con un valor predeterminado de 'light'.
Proveedor de Contexto: En el componente principal de la aplicación, utiliza ThemeContext.Provider para proporcionar el valor 'dark'.
Consumir el Contexto: En un componente hijo, utiliza el hook useContext para acceder al valor del contexto y cambiar el estilo del componente en función del tema.

Solución:

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

// Crear un contexto con un valor predeterminado
const ThemeContext = createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

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

function ThemedButton() {
  const theme = useContext(ThemeContext);
  const buttonStyle = {
    backgroundColor: theme === 'dark' ? '#333' : '#FFF',
    color: theme === 'dark' ? '#FFF' : '#000',
  };
  return <button style={buttonStyle}>I am styled by theme context!</button>;
}

export default App;

Retroalimentación y Consejos

Error Común: Olvidar envolver los componentes con el proveedor de contexto (Provider). Asegúrate de que todos los componentes que necesitan acceder al contexto estén dentro del proveedor.
Consejo: Utiliza contextos para datos que realmente necesitan ser globales. No abuses del contexto para evitar pasar props, ya que puede hacer que tu aplicación sea más difícil de entender y mantener.

Conclusión

El hook useContext simplifica el acceso a los valores de contexto en componentes funcionales, eliminando la necesidad de consumidores de contexto. Es una herramienta poderosa para gestionar datos globales en tu aplicación React. En el próximo módulo, profundizaremos en otros hooks importantes como useReducer y useRef.

Hook useContext

¿Qué es el Contexto en React?

Creación de un Contexto

Proveedor de Contexto

Consumidor de Contexto

Uso del Hook useContext

Ejemplo Práctico

Explicación del Código

Ejercicio Práctico

Retroalimentación y Consejos

Conclusión

Curso de React

Módulo 1: Introducción a React

Módulo 2: Componentes de React

Módulo 3: Trabajando con Eventos

Módulo 4: Conceptos Avanzados de Componentes

Módulo 5: Hooks de React

Módulo 6: Enrutamiento en React

Módulo 7: Gestión del Estado

Módulo 8: Optimización del Rendimiento

Módulo 9: Pruebas en React

Módulo 10: Temas Avanzados

Módulo 11: Proyecto: Construyendo una Aplicación Completa