0

React - Entendendo o Fluxo de Dados Unidirecional e Prop Drilling

#ReactJS #JavaScript #TypeScript
Guilherme Costa
Guilherme Costa

# O Conceito


Utilizando o React talvez vc encontre o termo Unidirectional Data Flow. Mas o que isso exatamente?


Basicamente isso significa que os dados só podem fluir em uma direção para as outras partes da aplicação.


Diferente de outras ferramentas como o framework Angular, o React por padrão não suporta o uso de bi-directional binding em que o fluxo de dados é feito em duas direções.




# Mas isso não seria uma desvantagem ?


Bom, isso não é necessariamente uma desvantagem pois assim o fluxo de dados e o controle de dados da aplicação fica bem mais simples.


No React cada componente faz parte de uma árvore de componentes, e essencialmente os dados são passados pelas props e fluem atráves dessa arvore em apenas uma direção, do componente mais alto para seus componentes filhos.


Por padrão um componente filho não pode atualizar o estado de seu componente pai, a menos que você o permita fazer isso, lhe passando a função de setState :



# Prop drilling


Porém,essa forma de passar dados atráves das props pode causar um problema popularmente chamado de prop drilling.


# Mas o que é prop drilling ?


Prop drilling em sua forma mais simples é basicamente o fato de passar os dados através das props para baixo da arvore de componentes.


Até agora nenhum problema certo? por um lado isso é bom pois ao mudar o estado em apenas um lugar os outros componentes vão reagir igualmente dependendo do estado declarado, e isso sem precisar fazer mudanças em diversos componentes.


Então qual é o problema que o prop drilling pode causar ?


O problema é quando passamos as props para um componente filho que não vai utilizar diretamente essas props, mas vai ajudar a passar elas para seu próprio componente filho ( que talvez também não vai utilizar essas props e ai por diante).


Segue uma imagem para entendermos melhor: