React ContextAPI: Um consumer, dois providers. O que acontece?
— react, context-api — 2 min read
Como funciona
ContextAPI1 é um recurso bem útil do React que facilita o compartilhamento de um estado entre vários componentes sem que você tenha que passar as props por cada um deles. Com os hooks2 ficou ainda mais fácil usar esse recurso.
Para cada contexto, você tem Providers e Consumers. O Provider mantém o estado que você quer que seja compartilhado em sua prop value. Os Consumers são aqueles que vão acessar o estado mantido por esse Provider.
Uma aplicação comum disso é para mantermos salvo o usuário que está atualmente logado no sistema. Assim, temos um provider que mantém em seu estado os dados desse usuário (ou nada, caso não tenha nenhum usuário logado). Qualquer página da nossa aplicação pode ter acesso a esse estado desde que ela esteja abaixo do Provider na árvore de renderização, podendo assim autorizar ou não usuários a acessarem determinados recursos.
Mas e se colocarmos mais de um Provider? Explode?
O uso mais comum é termos um Provider porque é interessante termos um lugar só para consultarmos caso precisemos desse estado em específico. Mas o que acontece se tiver mais de um?
Não explode e não dá erros bizarros, dois pontos positivos e contando. Para entender o que aconteceu temos que prestar atenção nessa parte aqui:
1<OurProvider value="Hello World!">2 <OurProvider value="Olá mundo!">3 <OurConsumer />4 </OurProvider>5</OurProvider>Na nossa árvore de renderização, O OurProvider com value="Hello World" é o primeiro componente, portanto, a raiz. O componente que vem após ele é um OurProvider com um value diferente. Por fim, nosso OurConsumer.
Quando esse último tenta acessar o valor do nosso contexto, é buscado o Provider mais próximo dele na árvore de renderização. Ao sair em busca do Provider, encontramos nosso OurProvider com value="Olá mundo!" e esse valor é retornado.
Esse mecanismo - que já vem pronto! - facilita quando, por exemplo, queremos que um módulo acesse um valor diferente do restante da aplicação. Isso é comum no caso dos temas. Quando utilizamos uma biblioteca como material-ui3, podemos configurar um tema com, por exemplo, as cores que queremos que nosso App use. Caso uma parte do sistema tenha um design diferente, com outro grupo de cores, podemos colocar um segundo Provider com esse tema especial em volta desse módulo. Assim, mantemos todos os outros módulos do App com as cores do tema principal e apenas esse módulo com as cores do tema especial.
Apesar de usar essa funcionalidade com frequência, ao utilizar o mecanismo através de outras bibliotecas é difícil saber o que foi facilitado pela biblioteca e o que já está pronto no próprio React. Esse teste é fruto dessa dúvida.