En React, un contexto es una forma de poder pasar datos a traves del arbol de componentes sin tener que pasar uno por uno ese dato desde su emisor hasta su receptor. Supongamos que el componente 1 genera un dato que necesita consumir el componente cuatro. Deberiamos pasarselo de 1 al 2, del 2 al 3 y del 3 al 4 para que recien este pueda utilizarlo. El concepto de contexto viene a solucionar esto porque permite pasar directamente el dato que se solicita al componente que lo requiere y no que pase por todo el arbol de componentes. (lo que se llama habitualmente prop drilling)

Para poder lograr que el contexto pueda estar accesible en la aplicacion, es necesario envolverla dentro de un proveedor de ese contexto. Es decir, debemos decir que todo lo que forme parte de esta aplicacion tiene acceso directo a ese contexto.

Crear el contexto

Para crear el contexto primero debemos importar createContext de React

import {createContext} from "react"

Luego debemos crear el contexto. Para el ejemplo supongamos que lo que queremos es que la aplicacion entera acceda a un esquema de filtros, crearemos un contexto de filtros

export const FiltersContext=createContext()

Crear el proveedor de ese contexto

Ahora debemos crear la forma en la que este contexto se proveera y sera accesible a las partes que deseemos de la app

export function FiltersProvider({children}){
    return(
        <FiltersContext.Provider value={{categoria:"todos", precio:0}}>
					{children}
				</FiltersContext.Provider>
    )
}

Brindar ese contexto

Ahora tenemos que poner a disposicion de los componentes que lo requieran este contexto. Vamos a suponer que queremos que toda nuestra app tenga acceso a ese contexto. Para eso nos vamos al punto de entrada de nuestra aplicacion: main.jsx

ReactDOM.createRoot(document.getElementById('root')).render(
  <FiltersProvider>
    <App />
  </FiltersProvider>,
)

Consumir el contexto

Ya tenemos todo listo para que la app empiece a consumir el contexto. Para eso vamos al componente que lo requiere.

¿Cuando usar useContext?

useContext está pensado para estados y contextos que cambien con poca frecuencia o que sean muy pequeños. Ej.: una sesión iniciada de un usuario. Para estados mas complejos es recomendable utilizar otras herramientas como Redux o Zustand.