Como usar context API de um modo extremamente simples
Quando aplicações um pouco maiores são desenvolvidas com o ReactJS a separação em componente pode acabar ficando maior e os componentes podem depender de estados criados em componentes bem anteriores no grau de parentesco. Quando isso ocorre é muito comum passar o estado via props por toda a árvore de componentes, até chegar no componente que realmente se precisa do estado, ou o último componente que usa o estado na cadeia hierárquica.
Esse fenômeno é chamado de “prop drilling”, e acaba por fazer o código ficar carregado e dificulta a vida do desenvolvedor, que pode acabar cometendo erros ao passar sucessivamente o estado para baixo.
Na última aplicação que fiz, seguindo o modelo do tip calculator disponível no front-end mentor, a proposta era fazer uma aplicação que divida o valor gasto e a comissão do garçom, caso exista, pelo número de pessoas presentes. E devido ao uso de múltiplos componentes, e todos os inputs que são necessários para o cálculo final, decidi utilizar a context API para solucionar a possível ocorrência do “prop drilling”.
Ao criar uma aplicação que utiliza de contextos é possível criar variáveis de estado globais, que são sustentadas para todos os componentes abaixo do provedor dessas variáveis. Assim, é possível evitar a repetição da ação de passar o estado para baixo na cadeia de componentes.
Iniciar a context API é bem simples e prático. É apenas necessário o uso do createContext e useContext já presentes na importação do react. Além de ser possível preparar tudo em um único arquivo e tornar ainda mais fácil e prático de se utilizar, gerando ainda um efeito de tornar o código mais limpo.
A primeira coisa a ser feita é criar o contexto com createContext() e atribuir seu valor a uma constante.
import React, { createContext, useContext} from 'react';const TotalContext = createContext();
Logo após isso é necessário criar o provider, é ele que irá sustentar os estados globais, para prover os mesmos para todos os filhos. E para tornar mais fácil é prático é conveniente criar uma constante que vai receber o provider já montado, lembrando que o provider tem que ter um value, que recebe um objeto com todos os estados que irá prover.
const TotalProvider = ({ children }) => {
return (<TotalContext.Provider value={{ }} >
{children}
</TotalContext.Provider>
);
};
Por último nesse arquivo vamos já criar o consumer, que é o consumidor dos estados globais. Para evitar de ter que importar o useContext() e todos os estados globais que forem necessários em todos os arquivos, já fazemos uma constante receber o consumidor para que apenas seja necessário importar o consumidor em cada arquivo que se deseja consumir os estados globais.
Lembrando que não podemos esquecer de exportar as variáveis que usamos para cada fase da criação do contexto.
const TotalConsumer = () => useContext(TotalContext);export { TotalContext, TotalProvider, TotalConsumer };
Para tudo funcionar adequadamente fazemos o provider estar acima na hierarquia de todos os componentes que vão usar os estados globais, nesse caso, acima da App.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';import { TotalProvider } from './assets/Contexts/TotalContext.js'; ReactDOM.render(
<React.StrictMode>
<TotalProvider>
<App />
</TotalProvider>
</React.StrictMode>,
document.getElementById('root'),
);
Abaixo segue um exemplo de como consumir o estado global.
import { TotalConsumer } from '../../Contexts/TotalContext'; fconst {estados globais que irão ser utilizados} = TotalConsumer();
Para mais acesse o repositório: https://github.com/JCDMeira/16-tip-calculator
ou o deploy: https://jcdmeira-tip-calculator.netlify.app/
E não deixe de incentivar interagindo com o artigo ou dando estrelas no repositório 😄
