Utilize o conceito de elevação de estado (lifting state up) para compartilhar dados entre componentes irmãos no React.
Tags: webdev, javascript, react, typescript
Published: 2023-04-22 00:37:08

<div class="markdown prose w-full break-words dark:prose-invert dark"><p>O React é uma das bibliotecas JavaScript mais populares para construção de interfaces de usuário. Com o React, é possível criar componentes reutilizáveis, que são como peças de lego que podem ser combinadas para formar interfaces complexas. No entanto, uma das maiores dificuldades no desenvolvimento com React é compartilhar dados entre componentes irmãos.</p><p>O conceito de elevação de estado (lifting state up) é uma das soluções mais comuns para compartilhar dados entre componentes irmãos no React. Neste artigo, vamos explicar o que é elevação de estado e como ela funciona.</p><h2>O que é elevação de estado?</h2><p>Elevação de estado é um padrão de design que consiste em mover o estado compartilhado entre componentes irmãos para um ancestral comum. Em outras palavras, ao invés de cada componente irmão ter seu próprio estado, o estado é mantido em um componente pai e passado para os componentes filhos como propriedades.</p><p>O objetivo da elevação de estado é simplificar a comunicação entre componentes irmãos e tornar o código mais fácil de entender e manter.</p><h2>Como funciona a elevação de estado?</h2><p>Para entender como a elevação de estado funciona, vamos considerar o exemplo de uma aplicação de carrinho de compras. Suponha que temos três componentes irmãos: um componente <code>Carrinho</code> que mostra os itens do carrinho, um componente <code>ListaDeProdutos</code> que lista os produtos disponíveis para compra e um componente <code>ItemDeProduto</code> que representa um item de produto na lista.</p><p>Inicialmente, cada componente tem seu próprio estado. O componente <code>ListaDeProdutos</code> mantém uma lista de produtos disponíveis, o componente <code>ItemDeProduto</code> mantém o estado do produto selecionado e o componente <code>Carrinho</code> mantém a lista de itens no carrinho.</p><p>No entanto, para que os componentes <code>ListaDeProdutos</code> e <code>Carrinho</code> possam interagir entre si, precisamos passar informações entre eles. Isso pode ser feito usando elevação de estado. Em vez de manter o estado do carrinho no componente <code>Carrinho</code>, podemos movê-lo para um componente pai comum, como o componente <code>App</code>.</p><pre><div class="bg-black rounded-md mb-4"><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-javascript"><span class="hljs-keyword">class</span> <span class="hljs-title class_">App</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">React.Component</span> {
  <span class="hljs-title function_">constructor</span>(<span class="hljs-params">props</span>) {
    <span class="hljs-variable language_">super</span>(props);
    <span class="hljs-variable language_">this</span>.<span class="hljs-property">state</span> = {
      <span class="hljs-attr">produtos</span>: [
        {<span class="hljs-attr">id</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">nome</span>: <span class="hljs-string">"Camiseta"</span>, <span class="hljs-attr">preco</span>: <span class="hljs-number">29.90</span>},
        {<span class="hljs-attr">id</span>: <span class="hljs-number">2</span>, <span class="hljs-attr">nome</span>: <span class="hljs-string">"Calça"</span>, <span class="hljs-attr">preco</span>: <span class="hljs-number">59.90</span>},
        {<span class="hljs-attr">id</span>: <span class="hljs-number">3</span>, <span class="hljs-attr">nome</span>: <span class="hljs-string">"Tênis"</span>, <span class="hljs-attr">preco</span>: <span class="hljs-number">99.90</span>}
      ],
      <span class="hljs-attr">itensCarrinho</span>: []
    };
  }

  adicionarItemAoCarrinho = <span class="hljs-function">(<span class="hljs-params">produto</span>) =&gt;</span> {
    <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setState</span>(<span class="hljs-function"><span class="hljs-params">prevState</span> =&gt;</span> ({
      <span class="hljs-attr">itensCarrinho</span>: [...prevState.<span class="hljs-property">itensCarrinho</span>, produto]
    }));
  }

  <span class="hljs-title function_">render</span>(<span class="hljs-params"></span>) {
    <span class="hljs-keyword">return</span> (
      <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">ListaDeProdutos</span>
          <span class="hljs-attr">produtos</span>=<span class="hljs-string">{this.state.produtos}</span>
          <span class="hljs-attr">adicionarItemAoCarrinho</span>=<span class="hljs-string">{this.adicionarItemAoCarrinho}</span>
        /&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">Carrinho</span> <span class="hljs-attr">itens</span>=<span class="hljs-string">{this.state.itensCarrinho}</span> /&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
    );
  }
}
</code></div></div></pre><p>No exemplo acima, movemos o estado <code>itensCarrinho</code> do componente <code>Carrinho</code> para o componente</p></div>