Como se comunicar entre componentes de React JS

Neste artigo você aprenderá a como se comunicar entre componentes de React JS, uma ação muito comum em todos os projetos de React

Fala programador(a), beleza? Bora aprender mais sobre React JS!

Um dos maiores desafios no desenvolvimento com React JS é a comunicação entre componentes.

Na arquitetura baseada em componentes do React, a estrutura é hierárquica, o que significa que os componentes são organizados em uma árvore de componentes pai e filho.

Portanto, a comunicação eficiente entre esses componentes é vital para criar aplicações reativas e dinâmicas.

Neste artigo, exploraremos como estabelecer uma comunicação eficaz entre componentes no React.

Comunicação de Pai para Filho

A comunicação do componente pai para o componente filho é feita através de props.

Exemplo Básico:

function Pai() {
  const mensagem = "Olá, componente filho!";
  
  return <Filho saudacao={mensagem} />;
}

function Filho(props) {
  return <div>{props.saudacao}</div>;
}

Neste exemplo, o componente Pai passa uma mensagem para o componente Filho através da propriedade saudacao.

Comunicação de Filho para Pai

A comunicação do filho para o pai pode ser um pouco mais complicada. Uma abordagem comum é o pai passar uma função para o filho via props, e o filho invoca essa função.

Exemplo:

function Pai() {
  const receberMensagem = (msg) => {
    console.log("Mensagem recebida do filho:", msg);
  };
  
  return <Filho enviarMensagem={receberMensagem} />;
}

function Filho(props) {
  const handleClick = () => {
    props.enviarMensagem("Esta é uma mensagem do filho!");
  };

  return <button onClick={handleClick}>Enviar Mensagem</button>;
}

Neste exemplo, o componente Filho envia uma mensagem para o componente Pai ao clicar no botão.

Comunicação entre Componentes Irmãos

A comunicação direta entre componentes irmãos é mais desafiadora. Uma solução é levantar o estado para o componente pai comum e usar o método de comunicação filho-pai mencionado anteriormente.

Exemplo:

function Pai() {
  const [mensagem, setMensagem] = React.useState("");

  const atualizarMensagem = (msg) => {
    setMensagem(msg);
  };

  return (
    <div>
      <FilhoA atualizarMsg={atualizarMensagem} />
      <FilhoB mensagem={mensagem} />
    </div>
  );
}

function FilhoA(props) {
  const enviarMensagem = () => {
    props.atualizarMsg("Mensagem do Filho A para Filho B!");
  };

  return <button onClick={enviarMensagem}>Enviar para Filho B</button>;
}

function FilhoB(props) {
  return <div>{props.mensagem}</div>;
}

Aqui, o componente FilhoA envia uma mensagem para FilhoB através do componente Pai.

Context API para Comunicação Profunda

Para componentes distantes na hierarquia, passar props pode ser verboso. A Context API do React permite compartilhar valores, como o tema ou a linguagem da interface, entre componentes sem ter que passar explicitamente um prop através de cada nível da árvore.

Exemplo:

const MensagemContext = React.createContext();

function Pai() {
  return (
    <MensagemContext.Provider value="Mensagem do Contexto">
      <Filho />
    </MensagemContext.Provider>
  );
}

function Filho() {
  const mensagem = React.useContext(MensagemContext);

  return <div>{mensagem}</div>;
}

O componente Filho pode acessar a mensagem do contexto diretamente, sem que o componente Pai passe explicitamente como props.

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

Chegamos ao fim do artigo que ensina a como se comunicar entre componentes de React!

A comunicação entre componentes é uma parte fundamental do desenvolvimento com React JS.

Através do uso inteligente de props, funções, e da Context API, é possível estabelecer uma comunicação eficiente entre componentes, seja em relação direta pai-filho, entre componentes irmãos, ou até mesmo entre componentes distantes na árvore de componentes.

Ao dominar essas técnicas, você pode construir aplicações React mais flexíveis, eficientes e manuteníveis.

Está buscando em evoluir como Programador? Confira o nossos cursos de programação.