React + Context API
Apropagação de props de maneira descendente e exagerada pode estar presente em apps react que não utilizam alguma biblioteca para gerenciar os estados. Essa característica é comum e se chama:
Prop Drilling
Uma maneira de evitar isso sem usar Redux ou qualquer outro gerenciador de estado é utilizar a context api, presente do react desde a versão 16.3.
Para simplificar o entendimento e a mecânica envolvida no processo, vou mostrar como desenvolvi o componente Drawer que compartilha o seu estado a partir da context api.
Como ponto de partida para a aplicação utilizei o react-create-app, e defini da seguinte maneira:
O estado do Drawer será acessível pelos componentes Drawer e CtaButton para isso será necessário construir um Provider.
O componente Provider aceita uma prop
valueque pode ser passada para ser consumida por componentes que são descendentes deste Provider. Um Provider pode ser conectado a vários consumidores. Providers podem ser aninhados para substituir valores mais ao fundo da árvore.
Todos os componentes que forem "filhos" de DrawerProvider terão acesso aos dados compartilhados através do contexto.
Definindo o contexto na Linha 4 : Cria um objeto Contexto (context). Quando o React renderiza um componente que assina esse objeto Contexto (context), este vai ler o valor atual do
Providersuperior na árvore que estiver mais próximo.
O "Wrapper" DrawerContext.Provider é exposto e as variáveis ou funções disponíveis através do objeto value(linha 11) são acessíveis pelos seus "filhos" (veja o primeiro arquivo).
O hook useContext (linha 28) é fundamental pois é a partir dele que um componente consegue acessar os valores de showDrawer e setShowDrawer
useContext Aceita um objeto de contexto (o valor retornado de
React.createContext) e retorna o valor atual do contexto. O valor de contexto atual é determinado pela propvaluedo<MyContext.Provider>mais próximo acima do componente de chamada na árvore.
Na linha 29 fiz um teste para lançar um erro caso o contexto seja usado fora do escopo do provider.
Utilizando o hook useDrawer:
Abaixo: Uso o hook customizado para acessar os valores e métodos do provider, dessa maneira consigo controlar a abertura e fechamento do drawer tanto dentro do componente Drawer quanto do componente Ctabutton.
Existem outras maneiras de evitar o prop drilling e evitar a difusão de props na árvode de nodos do seu projeto. A api de contexto serve para alguns casos e eu ainda estou me adaptando e entendendo como utilizar na "vida real". Para tomar uma decisão assertiva leia com atenção a este post da documentação:
