React Context

Context provee una forma de pasar datos a través del árbol de componentes sin tener que pasar props manualmente en cada nivel.

En una aplicación típica de React, los datos se pasan de arriba hacia abajo ( de padre a hijo ) a través de props, pero esta forma puede resultar incómoda para ciertos tipos de props (por ejemplo, lozalización, el tema de la interfaz) que son necesarias para muchos componentes dentro de una aplicación. Context proporciona una forma de compartir valores como estos entre componentes sin tener que pasar explícitamente un prop a través de cada nivel del árbol.

Cuándo usar Context

Context está diseñado para compatir datos que pueden considerar "globales" para un árbol de componentes en React, como el usuario autenticado actual, el tema o el idioma preferido. Por ejemplo, en el código a continuación, pasamos manualmente un prop de tema para darle estilo al componente:

function App() {
  const [theme, setTheme] = useState("light");

  // .... 
  return(
    <ThemeContext.Provider value={theme}>
      <Page />
    </ThemeContext.Provider>
  );
}

Props

• value: El valor que deseamos pasar a todos los componentes que leen el contexto dentro de este proveedor, sin importar cuán profundo sea el componente (hijo, nieto, bisnieto). El valor de contexto puede ser cualquier tipo. Un componente que invoca a useContext(ThemeContext) dentro del proveedor recibe el valor de (value) del proveedor de contexto correspondiente más interno que se encuentra arriba.

const Button = () => {
  const theme = useContext(ThemeContext);
  return <button className={theme} />;
}