¿Qué es el contexto en React? ¿Cómo puedo crearlo y consumirlo?

El contexto es una forma de pasar datos a través de la jerarquía de componentes sin tener que pasar props manualmente en cada nivel.

Para crear un contexto en React usamos el hook createContext:

import { createContext } from 'react'

const ThemeContext = createContext()

Para usar el contexto, debemos envolver el árbol de componentes con el componente Provider:

<ThemeContext.Provider value="dark">
  <App />
</ThemeContext.Provider>

Para consumir el contexto, debemos usar el hook useContext:

import { useContext } from 'react'

function Button() {
  const theme = useContext(ThemeContext)
  return <button className={theme}>Haz clic aquí</button>
}