Context API: evitar o prop drilling

O problema: prop drilling

Imagine que um dado (o usuário, o tema, o idioma) é necessário em um componente muito profundo da árvore. Sem mais ferramentas, é preciso passá-lo por props através de todos os componentes intermediários, mesmo que não o usem. Isso é chamado de "prop drilling": props que estão apenas de passagem, poluindo assinaturas e acoplando componentes que não deveriam saber desse dado.

A solução: Context

A Context API permite que um componente distante leia um valor sem passá-lo por props em cada nível. Ela tem três peças:

1. Criar o contexto

const TemaContext = React.createContext("claro");

O argumento é o valor padrão (usado se não houver Provider acima).

2. Prover um valor com <Ctx.Provider>

Envolva a parte da árvore que deve ter acesso ao valor:

<TemaContext.Provider value="escuro">
  <Pagina />
</TemaContext.Provider>

Tudo o que estiver dentro poderá ler esse value, esteja na profundidade que estiver.

3. Ler o valor com useContext

Qualquer componente descendente o lê com o hook useContext:

function Botao() {
  const tema = useContext(TemaContext);
  return <button className={tema}>Tema atual: {tema}</button>;
}

Sem context, tema teria que viajar por props ao longo de toda a cadeia. Com context, o componente o consome diretamente do Provider mais próximo.

React.createContext e useContext já estão disponíveis nos exercícios.