Entendendo a API de contexto

Em um projeto React.js, criamos componentes e, em seguida, passamos adereços para esses componentes. Podemos passar esses adereços para níveis infinitos de componentes aninhados. Mas, se houver muitos componentes e todos precisarem de diferentes adereços compartilhados, o projeto se tornará incontrolável. É aí que entra a Context API. Ela nos permite usar props em níveis aninhados profundos sem fazer drill de props.

A maneira como o usamos é primeiro criando um contexto e para isso usamos o gancho createContext do react. Também podemos passar um valor padrão para ele, se quisermos. Em seguida, criamos um componente de provedor para esse contexto. O objeto context possui um componente provedor onde passamos o valor do contexto como prop. Aqui eu passei tanto o valor de contexto quanto uma função que permitirá que os componentes do consumidor modifiquem o valor.

Qualquer componente aninhado dentro do provedor terá acesso ao valor desse contexto específico. Podemos até aninhar um componente dentro de vários provedores e ele consumirá os valores de todos eles.

Aqui, os componentes Player e Match consumirão os valores do FootballProvider e do OtherProvider também.

Para usar o valor do provedor, precisamos usar o gancho useContext.

Isso permite o uso de valores compartilhados entre componentes profundamente aninhados sem componentes intermediários mantendo valores como pontes. Uma desvantagem de usar a Context API é que sempre que o valor do contexto muda, todos os componentes sob ele serão renderizados novamente. Mas não seria completamente justo chamar isso de desvantagem, pois esse comportamento também é benéfico em alguns cenários.