Context e useContext

Parte do curso de React

A sua aplicação tem um botão para ligar o modo escuro. O botão fica no painel de configurações, mas quem precisa saber do valor é um botão oito componentes abaixo, dentro de uma tabela, dentro de um card, dentro de uma página. Para levar o valor de um até o outro por props, cada componente do caminho tem de aceitar uma prop theme que não usa e repassá-la adiante.

O React tem uma saída oficial para isso, e o nome dela é context: um valor publicado num ponto da árvore de componentes que qualquer componente abaixo pode ler diretamente, por mais fundo que esteja, sem que ninguém no meio precise repassá-lo. A imagem que cabe aqui é a de uma transmissão de rádio. Uma emissora transmite numa frequência, e qualquer receptor dentro do alcance sintoniza direto.