Eligiendo un Enfoque de Estado en React

useContext State

Entendiendo el Hook useContext en React

En el desarrollo de aplicaciones con React, uno de los desafíos más comunes es la gestión del estado y la comunicación entre componentes. Afortunadamente, React nos proporciona varios hooks que facilitan esta tarea, y uno de los más poderosos es useContext.

¿Qué es useContext?

El hook useContext permite a los componentes de React suscribirse a un contexto y acceder a su valor sin necesidad de pasar props manualmente a través de cada nivel del árbol de componentes. Esto es especialmente útil cuando se tiene un estado global o configuraciones que deben ser accesibles por múltiples componentes en diferentes niveles de la jerarquía.

Cómo usar useContext

Para entender cómo funciona useContext, primero necesitamos crear un contexto. Supongamos que estamos construyendo una aplicación que necesita compartir el tema (claro u oscuro) entre varios componentes.

1. Crear el Contexto:

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

const ThemeContext = createContext();

const ThemeProvider = ({ children }) => {
const [theme, setTheme] = useState('light');

return (
{children}
);
};

export { ThemeContext, ThemeProvider };

2. Proveer el Contexto:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { ThemeProvider } from './ThemeContext';

ReactDOM.render(

,
document.getElementById('root')
);

3. Consumir el Contexto:

Now, any component within ThemeProvider can access the context using the useContext hook.

import React, { useContext } from «react»;
import { ThemeContext } from «./ThemeContext»;
const ThemedComponent = () => {
  const { theme, setTheme } = useContext(ThemeContext);
  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === «light» ? «dark» : «light»));
  };
  return (
    <div>
      The current theme is {theme}
      <button>Toggle Theme</button>
    </div>
  );
};
export default ThemedComponent;

Beneficios de useContext

  • Simplicidad: useContext simplifica el acceso a datos globales sin necesidad de pasar props manualmente.
  • Legibilidad: Hace que el código sea más limpio y fácil de entender.
  • Reutilización: Facilita la reutilización de lógica y estado en diferentes componentes.

Conclusión

El hook useContext es una herramienta poderosa que puede mejorar significativamente la gestión del estado y la comunicación entre componentes en tus aplicaciones React. Al usarlo correctamente, puedes hacer que tu código sea más limpio, mantenible y eficiente.