Comunicação entre componentes em Reactjs

Um dos principais fundamentos da programação em reactjs é a comunicação entre os componentes. As possibilidades de passar informações entre os componentes em uma aplicação.

De forma nativa do Reactjs, teremos três formas de abordar essa tarefa:

  • Comunicação Direta
  • Comunicação Indireta
  • Context API

Partindo da visualização da árvore de componentes esboçada a seguir e da necessidade informações que estão em um componente e serem passadas para outro componente e no momento seguinte, recebermos algum tipo de confirmação ou outra informação, entramos nos detalhes.

Na imagem a seguir, tentamos entender o fluxo que queremos fazer as informações serem passadas.

Com a comunicação direta e indireta para estabelecer a comunicação entre os dois componentes, origem e destino, sinalizados com os pontos amarelos é necessário envolver todos os outros entre eles, e assim, tornando esse processo muito complexo.

O componente pai do componente origem precisa passar uma função para o componente filho, o origem, que precisará responder e assim, passar a informação que deseja passar para o destino.

Agora, o componente pai com a informação, passará para o filho direto que assim por diante, passará para o próximo, até chegar a informação ao componente destino.

Ao finalizar a comunicação, teremos cinco componentes envolvidos, sendo que três deles foram desnecessários.

Para solucionar

Criar uma estrutura que esteja envolvendo, visualizando toda a aplicação. Inserir um componente antes do componente raiz da aplicação, e nesse componente então, teremos um determinado contexto.

Permitindo então, ser acessível entre os componentes envolvidos na comunicação.

E assim, utilizar somente as comunicações diretas e indiretas tornaria a tarefa muito desgastante, pois os componentes que estão querendo se comunicar estão distantes na árvore de componentes.

O ContextAPI é uma estrutura externa a árvore de componentes que permite ler informações que devem ser compartilhadas em diferentes componentes na árvore de componentes.

Concluíndo que comunicação direta e comunicação indireta não são suficientes para trocar informações entre componentes que estão distantes na árvore de componentes.

Utilizar comunicação direta e comunicação indireta nesses cenários resultará em uma solução com um nível de complexidade gigante, pois teremos muitas trocas de informações entre funções e parâmetros via props de um componente para outra até transportar a informação por todo o caminho.

Esse artigo é um resumo desses conceitos a partir de vídeos do Leonardo Moura que tem canal do Youtube.

Tomara que tenha gostado, aplauda o artigo! Até o próximo artigo e ótimos códigos.

Dev Front End Web — Javascript | ReactJS https://linktr.ee/douglasabnovato

Dev Front End Web — Javascript | ReactJS https://linktr.ee/douglasabnovato