DEV Community: Marcelo Petry

⚔React vs. Vue.js: A Batalha dos Gigantes do Front-end

Marcelo Petry — Tue, 21 Mar 2023 00:10:40 +0000

Se você é um desenvolvedor iniciante ou alguém procurando mudar para um novo framework, esta batalha épica irá ajudá-lo a entender as semelhanças e diferenças entre React e Vue.js. Vamos explorar o que torna cada um deles especial, comparar seus recursos e capacidades, e descobrir qual deles é a melhor escolha para o seu próximo projeto.

Antes de entrarmos na ação, vamos nos familiarizar brevemente com nossos competidores. React é uma biblioteca JavaScript criada pelo Facebook, focada em criar interfaces de usuário ricas e interativas. Ele ganhou popularidade rapidamente desde seu lançamento em 2013, e é utilizado por empresas como Airbnb, Netflix e Instagram.

Vue.js, por outro lado, é um framework JavaScript progressivo criado por Evan You, ex-funcionário do Google. Lançado em 2014, Vue.js se orgulha de ser fácil de aprender e integrar, e tem uma comunidade crescente de entusiastas e contribuidores. Algumas empresas que usam Vue.js incluem Alibaba, Xiaomi e GitLab.

Neste artigo, abordaremos tópicos como sintaxe, gerenciamento de estado, desempenho, curva de aprendizado e muito mais. Ao final, você terá uma visão clara das vantagens e desvantagens de cada framework e estará pronto para tomar uma decisão informada sobre qual deles é o melhor ajuste para as suas necessidades.

Neste guia, você verá:

1. Comparação entre React e Vue.js
1.1 Componentização
1.1.1 Componentes React:
1.1.2 Componentes Vue.js
1.2 Propriedades (props) e comunicação entre componentes
1.2.1 React Props:
1.2.2 Propriedades em Vue.js:
1.3 Virtual DOM e atualizações eficientes do DOM real
1.3.1 DOM (Document Object Model)
1.3.1.1 Árvores DOM
1.3.1.2 DOM Real
1.3.1.3 Virtual DOM
1.3.2 DOM em React:
1.3.3 DOM em Vue.js:
1.4 Ecossistema e integrações com outras bibliotecas e ferramentas
1.5 Arquitetura e estrutura
1.5.1 Comparação da arquitetura de ambos os frameworks
1.5.1.1 Arquitetura do React:
1.5.1.2 Arquitetura do Vue.js:
1.5.2 Diferenças Fundamentais de Arquitetura
1.5.3 Estrutura de diretórios e organização de projetos
1.5.3.1 Estrutura de Diretórios em React:
1.5.3.1 Estrutura de Diretórios em Vue.js:
1.5.4 Diferenças fundamentais na organização de diretórios
2. Diferenças na sintaxe e estilo de programação
2.1 JSX no React
2.2 Templates no Vue.js
2.3 Comparação de sintaxe entre React e Vue.js
2.4 Diretivas do Vue.js e como elas se comparam ao React
2.4.1 v-if e v-else
2.4.2 v-for
2.4.3 v-model
2.5 Estilos
2.5.1 Estilos em React
2.5.1.1 Estilos inline
2.5.1.2 Tailwind CSS
2.5.1.3 Folhas de estilo externas (CSS)
2.5.2 Estilos em Vue.js
2.5.2.1 Estilos inline
2.5.2.2 Folhas de estilo externas
2.5.2.3 Estilos de escopo (scoped styles)
3. Gerenciamento de estado e fluxo de dados
3.1 Abordagem do React com o Redux
3.2 Abordagem do Vue.js com o Vuex
4. Curva de aprendizado e documentação
4.1 Nível de dificuldade para aprender React
4.2 Nível de dificuldade para aprender Vue.js
4.3 Qualidade e abrangência da documentação
4.3.1 Documentação do React
4.3.2 Documentação do Vue.js
5. Desempenho e otimizações
5.1 Comparação de desempenho entre React e Vue.js
5.1.1 Tamanho do bundle
5.1.2 Velocidade de renderização
5.1.3 Uso de memória
5.2 Otimizações disponíveis em cada framework
5.2.1 Otimizações no React:
5.2.2 Otimizações no Vue.js:
6. Comunidade e ecossistema
6.1 Comparação do tamanho da comunidade e contribuições
6.2 Disponibilidade de bibliotecas e plugins de terceiros
6.2.1 Bibliotecas React
6.2.2 Bibliotecas Vue.js
Considerações Finais
Resumo das principais semelhanças e diferenças
Orientação sobre como escolher entre React e Vue.js

1. Comparação entre React e Vue.js

Nesta seção, vamos explorar os pontos em comum entre esses dois frameworks. Embora eles possam ter suas diferenças, também compartilham várias características fundamentais.

Discutiremos as semelhanças entre React e Vue.js, destacando áreas como componentização, comunicação entre componentes e uso do Virtual DOM. Essas semelhanças são cruciais para entender por que React e Vue.js são tão populares e eficazes na criação de interfaces de usuário modernas e responsivas.

1.1 Componentização

A componentização é um conceito central tanto no React quanto no Vue.js. Ela é a base para construir interfaces de usuário modulares e reutilizáveis, dividindo a aplicação em pequenas partes independentes chamadas componentes. Os componentes facilitam a manutenção, melhoram a legibilidade do código e ajudam a isolar a lógica e a apresentação.

1.1.1 Componentes React:

No React, um componente é uma classe ou função que retorna um elemento JSX. Um exemplo simples de um componente React é o seguinte:

import React from 'react';

function Welcome(props) {
  return <h1>Olá, {props.name}!</h1>;
}

export default Welcome;

Neste exemplo, criamos um componente funcional chamado "Welcome", que recebe um objeto chamado "props" como argumento. O componente retorna um elemento JSX com um título e o nome passado como propriedade. Para usar este componente em outro lugar, você importa e o inclui em outro componente, assim:

import React from 'react';
import Welcome from './Welcome';

function App() {
  return <Welcome name="João" />;
}

export default App;

1.1.2 Componentes Vue.js

No Vue.js, um componente é definido como um objeto JavaScript com opções, como data, methods, computed e template. Um exemplo simples de um componente Vue.js é o seguinte:

<template>
  <h1>Olá, {{ name }}!</h1>
</template>

<script>
export default {
  props: ['name']
}
</script>

Neste exemplo, criamos um componente chamado "Welcome" com um template que contém um título e a variável name interpolada. A propriedade name é definida como uma prop no objeto exportado. Para usar este componente em outro lugar, você o importa e o inclui em outro componente, assim:

<template>
  <Welcome name="João" />
</template>

<script>
import Welcome from './Welcome.vue';

export default {
  components: {
    Welcome
  }
}
</script>

Como você pode ver, tanto React quanto Vue.js seguem um padrão semelhante para criar e usar componentes. Ambos os frameworks incentivam a reutilização de componentes e a separação de preocupações, facilitando o desenvolvimento de interfaces de usuário escaláveis e de fácil manutenção.

1.2 Propriedades (props) e comunicação entre componentes

As propriedades, ou "props", são um mecanismo fundamental para a comunicação entre componentes tanto no React quanto no Vue.js. Elas permitem que você passe informações de um componente pai para um componente filho, facilitando a reutilização de componentes e a separação de responsabilidades.

1.2.1 React Props:

No React, você passa dados de um componente pai para um componente filho por meio de "props". As propriedades são como atributos HTML personalizados que você define ao usar um componente, permitindo que você forneça informações ao componente filho. Veja um exemplo de como passar propriedades no React:

import React from 'react';
import UserProfile from './UserProfile';

function App() {
  return <UserProfile username="jose123" age={30} />;
}

export default App;

Neste exemplo, passamos as propriedades username e age para o componente UserProfile. O componente filho, UserProfile, pode então acessar os valores dessas propriedades através do objeto props. Veja como o componente UserProfile usa as propriedades username e age:

import React from 'react';

function UserProfile(props) {
  return (
    <div>
      <p>Nome de usuário: {props.username}</p>
      <p>Idade: {props.age}</p>
    </div>
  );
}

export default UserProfile;

1.2.2 Propriedades em Vue.js:

No Vue.js, a comunicação entre componentes pai e filho é semelhante ao React. Você passa dados de um componente pai para um componente filho por meio de "props". Aqui está um exemplo de como passar propriedades no Vue.js:

<template>
  <UserProfile :username="'jose123'" :age="30" />
</template>

<script>
import UserProfile from './UserProfile.vue';

export default {
  components: {
    UserProfile
  }
}
</script>

Neste exemplo, passamos as propriedades username e age para o componente UserProfile. O componente filho, UserProfile, pode então acessar os valores dessas propriedades como props. Veja como o componente UserProfile usa as propriedades username e age:

<template>
  <div>
    <p>Nome de usuário: {{ username }}</p>
    <p>Idade: {{ age }}</p>
  </div>
</template>

<script>
export default {
  props: ['username', 'age']
}
</script>

É importante notar que as propriedades em ambos os frameworks são de "fluxo unidirecional". Isso significa que os dados fluem apenas do componente pai para o componente filho, e não vice-versa. Se você precisa comunicar informações do componente filho para o componente pai, você deve usar eventos personalizados no Vue.js ou "callbacks" no React.

Tanto React quanto Vue.js utilizam propriedades para a comunicação entre componentes, proporcionando uma maneira consistente e previsível de passar dados de um componente pai para um componente filho. Isso facilita o desenvolvimento de interfaces de usuário modulares e a separação de responsabilidades em suas aplicações.

1.3 Virtual DOM e atualizações eficientes do DOM real

O Virtual DOM é uma técnica de otimização de desempenho empregada tanto pelo React quanto pelo Vue.js. Ele consiste em uma representação em memória do Document Object Model (DOM) real do navegador, que é atualizado de forma mais eficiente antes de ser renderizado na tela. Caso você não seja familizarizado com os conceitos de DOM, acompanhe a subseção abaixo para entender melhor.

1.3.1 DOM (Document Object Model)

O Document Object Model, ou simplesmente DOM, é uma representação estruturada de um documento HTML ou XML. Em outras palavras, é a maneira como os navegadores interpretam e organizam o conteúdo de uma página da web. O DOM transforma o código HTML em uma estrutura de objetos interconectados, que podem ser manipulados e atualizados através de linguagens de programação como JavaScript.

1.3.1.1 Árvores DOM

Quando falamos em "árvore de DOM", estamos nos referindo à estrutura hierárquica criada pelos elementos HTML (tags) do documento. Essa árvore começa com um nó raiz (geralmente o elemento <html>), e cada elemento subsequente do documento é representado por nós que se ramificam dessa raiz. Por exemplo, a árvore de DOM de um documento HTML simples pode ser representada da seguinte forma:

html
 ├── head
 │    ├── title
 │    └── link (stylesheet)
 └── body
      ├── header
      │    └── h1
      ├── main
      │    ├── h2
      │    └── p
      └── footer
           └── small

Essa estrutura ilustra como os elementos HTML estão organizados hierarquicamente, em uma relação de pais e filhos e nos ajuda a entender como os navegadores interpretam e constroem a interface de usuário a partir do código HTML.

1.3.1.2 DOM Real

O "DOM real" é a representação do DOM em um navegador web, que é construído a partir do código HTML fornecido. O DOM real é responsável por exibir e gerenciar a interface de usuário de uma página da web. Quando você interage com uma página da web, como clicar em um botão ou preencher um formulário, o DOM real é atualizado para refletir essas alterações.

No entanto, atualizar o DOM real pode ser um processo lento e que consome recursos. Isso ocorre porque, sempre que uma parte do DOM real é alterada, o navegador precisa recalcular o layout, repintar a tela e executar outras tarefas que podem levar tempo, especialmente em aplicações web complexas.

1.3.1.3 Virtual DOM

Para resolver o problema de desempenho na atualização do DOM real, o conceito de "Virtual DOM" foi introduzido. O Virtual DOM é uma representação em memória do DOM real, geralmente implementada como objetos JavaScript. Ele atua como uma camada intermediária entre as atualizações de estado da aplicação e a atualização do DOM real.

A ideia principal do Virtual DOM é minimizar a quantidade de trabalho que o navegador precisa realizar para atualizar a interface do usuário. Em vez de atualizar o DOM real toda vez que algo muda, as atualizações são feitas primeiro no Virtual DOM. Em seguida, o navegador compara o Virtual DOM atualizado com o Virtual DOM anterior e calcula a diferença entre os dois, conhecida como "diff". Após calcular a diferença, apenas as alterações necessárias são aplicadas ao DOM real, o que resulta em uma atualização muito mais rápida e eficiente da interface do usuário.

Em resumo, o DOM é a representação estruturada de um documento HTML, e o DOM real é a versão do DOM que é gerenciada e renderizada pelo navegador. O Virtual DOM é uma otimização que minimiza a quantidade de atualizações que precisam ser feitas no DOM real, melhorando o desempenho e a experiência do usuário.

1.3.2 DOM em React:

No React, o Virtual DOM é um objeto JavaScript que representa a estrutura do DOM real. Quando o estado de um componente é alterado, o React cria uma nova árvore Virtual DOM e calcula a diferença entre a nova árvore e a árvore anterior, um processo chamado "reconciliação". Em seguida, o React atualiza apenas os nós do DOM real que foram alterados, em vez de atualizar todo o DOM. Isso torna a atualização do DOM real mais rápida e eficiente.

Vejamos um exemplo de como o React utiliza o Virtual DOM ao atualizar o estado de um componente:

// Importa o React e o hook "useState" para gerenciar o estado do componente
import React, { useState } from 'react';

// Cria um componente funcional chamado "Counter"
function Counter() {
  // Define o estado "count" e a função "setCount" para atualizá-lo
  const [count, setCount] = useState(0);

  // Retorna o JSX que será renderizado no DOM real
  return (
    <div>
      {/* Exibe o valor atual de "count" */}
      <p>Você clicou {count} vezes</p>
      {/* Define um manipulador de clique que atualiza o valor de "count" */}
      <button onClick={() => setCount(count + 1)}>Clique aqui</button>
    </div>
  );
}

// Exporta o componente "Counter"
export default Counter;

Neste exemplo, temos um componente Counter com um estado count. Quando o usuário clica no botão, o estado count é atualizado. O React automaticamente cria uma nova árvore Virtual DOM, compara-a com a árvore anterior e atualiza apenas os nós afetados no DOM real.

1.3.3 DOM em Vue.js:

No Vue.js, o Virtual DOM também é utilizado para otimizar a atualização do DOM real. Quando o estado de um componente é alterado, o Vue.js cria uma nova árvore Virtual DOM e calcula a diferença entre a nova árvore e a árvore anterior, um processo chamado "diffing". Assim como no React, o Vue.js atualiza apenas os nós do DOM real que foram alterados, tornando a atualização do DOM real mais rápida e eficiente.

Vejamos um exemplo de como o Vue.js utiliza o Virtual DOM ao atualizar o estado de um componente:

// Define o template HTML que será renderizado no DOM real
<template>
  <div>
    // Exibe o valor atual de "count"
    <p>Você clicou {{ count }} vezes</p>
    // Define um manipulador de clique que chama a função "increment"
    <button @click="increment">Clique aqui</button>
  </div>
</template>

// Define o script JavaScript que gerencia o estado e os métodos do componente
<script>
export default {
  // Define os dados (estado) do componente
  data() {
    return {
      count: 0 // Inicializa a propriedade "count" com o valor 0
    }
  },
  // Define os métodos do componente
  methods: {
    // Cria uma função chamada "increment" que atualiza o valor de "count"
    increment() {
      this.count++; // Incrementa o valor de "count" em 1
    }
  }
}
</script>

Neste exemplo, temos um componente Counter com um estado count. Quando o usuário clica no botão, o estado count é atualizado através da função increment. O Vue.js automaticamente cria uma nova árvore Virtual DOM, compara-a com a árvore anterior e atualiza apenas os nós afetados no DOM real.

Como podemos ver, tanto o React quanto o Vue.js utilizam o conceito de Virtual DOM para otimizar a atualização do DOM real. Ao calcular a diferença entre as árvores Virtual DOM e atualizar apenas os nós necessários, ambos os frameworks garantem um desempenho eficiente na atualização da interface do usuário. Isso é especialmente importante em aplicações web modernas e dinâmicas, onde as alterações no DOM são frequentes e a experiência do usuário deve ser rápida e suave.

1.4 Ecossistema e integrações com outras bibliotecas e ferramentas

Um dos aspectos mais importantes ao escolher um framework para o desenvolvimento de aplicações web é a disponibilidade de bibliotecas, ferramentas e comunidade que o rodeia. Um ecossistema rico e diversificado pode facilitar o desenvolvimento, fornecendo soluções prontas para uso e suporte da comunidade.

Tanto o React quanto o Vue.js possuem ecossistemas prósperos e comunidades ativas. Isso significa que você encontrará uma ampla variedade de bibliotecas e ferramentas de terceiros disponíveis para estender e aprimorar as funcionalidades dos frameworks. Algumas das bibliotecas e ferramentas mais populares incluem:

1 - Gerenciamento de estado: Redux (React), Vuex (Vue.js) - Essas bibliotecas facilitam o gerenciamento de estados complexos e compartilhados entre componentes.

2 - Roteamento: React Router (React), Vue Router (Vue.js) - Essas bibliotecas permitem que você crie aplicações de página única (SPA) com navegação e histórico de URL.

3 - Interface do usuário (UI) e componentes: Material-UI (React), Vuetify (Vue.js) - Essas bibliotecas oferecem componentes de interface do usuário pré-construídos e estilizados, facilitando a criação de aplicações atraentes e responsivas.

React e Vue.js são projetados para serem flexíveis e fáceis de integrar com outras bibliotecas e ferramentas. Ambos os frameworks podem ser utilizados com outras bibliotecas JavaScript populares, como Axios (para realizar solicitações HTTP) e Moment.js (para manipulação de datas e horas). Além disso, os dois frameworks são compatíveis com ferramentas de desenvolvimento modernas, como Webpack (para empacotamento de módulos e otimização de recursos) e Babel (para transpilação de código JavaScript).

Os desenvolvedores de ambos os frameworks também podem tirar proveito das extensões do navegador que facilitam o desenvolvimento e a depuração de aplicações. O React DevTools e o Vue.js DevTools são extensões do navegador que fornecem uma série de recursos úteis, como inspeção de componentes, monitoramento de desempenho e visualização de mudanças de estado.

1.5 Arquitetura e estrutura

As diferenças em arquitetura e estrutura influenciam diretamente a maneira como você escreve e organiza o código, bem como a facilidade de manutenção e escalabilidade da aplicação.

1.5.1 Comparação da arquitetura de ambos os frameworks

A arquitetura de um framework refere-se à organização fundamental e aos princípios de design que governam como ele funciona, como os componentes se comunicam e como os desenvolvedores devem interagir com o framework para criar aplicações. A arquitetura de um framework é composta por diversos elementos, como padrões de design, estruturas de dados, bibliotecas e APIs, que trabalham juntas para fornecer um ambiente de desenvolvimento coerente e eficiente.

1.5.1.1 Arquitetura do React:

A arquitetura do React é baseada em componentes, o que significa que ele permite dividir a interface do usuário em partes reutilizáveis e independentes. Os componentes React podem ser escritos como classes ou funções e são responsáveis por renderizar partes específicas da interface do usuário e gerenciar o estado local (se necessário).
Vamos examinar um exemplo simples de componente React:

import React, { useState } from 'react';

function HelloWorld() {
  const [text, setText] = useState('Hello, World!');

  return (
    <div>
      <p>{text}</p>
      <button onClick={() => setText('Hello, React!')}>Mudar Texto</button>
    </div>
  );
}

export default HelloWorld;

Neste exemplo, criamos um componente funcional chamado HelloWorld, que renderiza um parágrafo e um botão. O estado local text é gerenciado usando o hook useState, e é atualizado quando o usuário clica no botão. Ao final, o componente HelloWorld é exportado para para que fique disponível para importação por outros módulos.

1.5.1.2 Arquitetura do Vue.js:

Semelhante ao React, a arquitetura do Vue.js também é baseada em componentes. No entanto, os componentes Vue.js são escritos usando uma combinação de HTML, JavaScript e CSS em um único arquivo (arquivo .vue). Os componentes Vue.js possuem uma estrutura clara e previsível, com seções distintas para template, script e estilo.
Vamos ver um exemplo de componente Vue.js:

<template>
  <div>
    <p>{{ text }}</p>
    <button @click="updateText">Mudar Texto</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: 'Hello, World!'
    };
  },
  methods: {
    updateText() {
      this.text = 'Hello, Vue.js!';
    }
  }
};
</script>

No código acima, criamos um componente Vue.js chamado HelloWorld, que renderiza um parágrafo e um botão. O estado local text é gerenciado na função data, e é atualizado quando o usuário clica no botão, chamando o método updateText.

1.5.2 Diferenças Fundamentais de Arquitetura

Tanto o React quanto o Vue.js utilizam uma arquitetura baseada em componentes, facilitando a reutilização de código e a divisão da interface do usuário em partes independentes. No entanto, há algumas diferenças fundamentais na forma como os componentes são escritos e estruturados em cada framework:

1 - No React, os componentes podem ser escritos como classes ou funções, e a lógica do componente é misturada com a marcação JSX. Isso permite uma maior flexibilidade, mas pode tornar o código mais difícil de ler e organizar.

2 - No Vue.js, os componentes são escritos em arquivos .vue, com seções distintas para template, script e estilo. Essa estrutura clara e previsível torna o código mais fácil de ler e entender, especialmente para desenvolvedores menos familiarizados com o framework.

3 - O gerenciamento de estado local nos componentes React é geralmente realizado usando hooks, como useState, enquanto no Vue.js, o estado é gerenciado na função data e os métodos são definidos na seção methods. Ambas as abordagens têm suas vantagens e desvantagens, e a escolha entre elas pode ser uma questão de preferência pessoal ou familiaridade com a sintaxe e os conceitos.

4 - A forma como os estilos são aplicados também difere entre os dois frameworks. No React, os estilos podem ser aplicados usando CSS-in-JS, estilos inline ou arquivos CSS externos, enquanto no Vue.js, os estilos são geralmente aplicados dentro da seção <style> do arquivo .vue.

A arquitetura e a estrutura dos componentes no React e no Vue.js são baseadas em conceitos similares, mas apresentam algumas diferenças na forma como os componentes são escritos e organizados. Ao escolher entre os dois frameworks, é importante considerar as preferências pessoais e a familiaridade com a sintaxe e os conceitos, bem como o tipo de projeto e as necessidades específicas de desenvolvimento.

1.5.3 Estrutura de diretórios e organização de projetos

A estrutura de diretórios e a organização de um projeto podem ter um impacto significativo na facilidade de desenvolvimento e manutenção de uma aplicação. Vamos comparar as estruturas de diretório e organização de projetos comuns no React e no Vue.js.

1.5.3.1 Estrutura de Diretórios em React:

O React não possui uma estrutura de diretórios obrigatória, permitindo que os desenvolvedores organizem seus projetos como desejarem. No entanto, ao utilizar o create-react-app (uma ferramenta oficial para iniciar projetos React), é gerada uma estrutura de diretórios básica que inclui:

my-react-app/
  ├── node_modules/
  ├── public/
  │   ├── favicon.ico
  │   ├── index.html
  │   └── manifest.json
  ├── src/
  │   ├── App.css
  │   ├── App.js
  │   ├── App.test.js
  │   ├── index.css
  │   ├── index.js
  │   ├── logo.svg
  │   └── serviceWorker.js
  ├── .gitignore
  ├── package.json
  └── README.md

Dentro da pasta src, os desenvolvedores geralmente organizam seus componentes e arquivos relacionados de várias maneiras, como:

Por tipo de arquivo: agrupar arquivos por tipo, como componentes, estilos e testes.
Por funcionalidade: agrupar arquivos relacionados a uma funcionalidade específica.
Por componente: agrupar todos os arquivos relacionados a um componente específico, como JavaScript, CSS e testes.

1.5.3.1 Estrutura de Diretórios em Vue.js:

O Vue.js também não impõe uma estrutura de diretórios obrigatória, mas o Vue CLI (a ferramenta oficial para criar projetos Vue.js) gera uma estrutura básica de diretórios ao criar um novo projeto:

my-vue-app/
  ├── node_modules/
  ├── public/
  │   ├── favicon.ico
  │   └── index.html
  ├── src/
  │   ├── assets/
  │   ├── components/
  │   │   └── HelloWorld.vue
  │   ├── App.vue
  │   └── main.js
  ├── .gitignore
  ├── babel.config.js
  ├── package.json
  └── README.md

A estrutura gerada pelo Vue CLI já organiza os componentes e ativos (como imagens e estilos globais) em pastas separadas. Os desenvolvedores podem optar por organizar ainda mais os componentes em subpastas, com base em funcionalidades ou outros critérios.

1.5.4 Diferenças fundamentais na organização de diretórios

Tanto o React quanto o Vue.js permitem flexibilidade na organização de diretórios e arquivos de projeto. No entanto, existem algumas diferenças notáveis entre as duas abordagens:

1 - A estrutura de diretórios gerada pelo create-react-app para projetos React é mais simples e menos opinativa em comparação com a gerada pelo Vue CLI para projetos Vue.js. Isso pode ser vantajoso para desenvolvedores que preferem ter mais controle sobre a organização do projeto.

2 - A estrutura de diretórios do Vue.js gerada pelo Vue CLI já inclui uma organização básica para componentes e ativos, enquanto a estrutura do React gerada pelo create-react-app não faz distinções específicas para componentes ou outros tipos de arquivos. Isso pode ajudar os desenvolvedores a começar com uma organização mais clara no Vue.js.

3 - O Vue.js utiliza arquivos de componente .vue, que contêm template, script e estilo em um único arquivo, facilitando a localização e a manutenção de todos os aspectos de um componente em um só lugar. No React, os componentes, estilos e lógica geralmente são separados em arquivos diferentes, o que pode levar a uma organização mais complexa, especialmente em projetos maiores.

4 - Ambos os frameworks permitem a criação de estruturas de diretório personalizadas, e os desenvolvedores podem optar por organizar seus projetos de acordo com suas preferências ou necessidades específicas. Algumas abordagens populares incluem a organização por funcionalidade, por tipo de arquivo ou por componente.

Tanto o React quanto o Vue oferecem flexibilidade na organização de diretórios e projetos, mas a estrutura gerada pelo Vue CLI tende a ser mais opinativa e orientada a componentes desde o início. A escolha entre os dois frameworks dependerá das preferências pessoais dos desenvolvedores, bem como das necessidades e requisitos específicos do projeto.

2. Diferenças na sintaxe e estilo de programação

Uma das principais diferenças entre React e Vue.js está na maneira como eles lidam com a criação de componentes e suas interfaces visuais. Nesta subseção, vamos comparar o JSX usado no React e os templates no Vue.js, de maneira detalhada e com linguagem amigável para iniciantes.

2.1 JSX no React

O React utiliza uma extensão de sintaxe chamada JSX (JavaScript XML) para definir a estrutura e a aparência dos componentes. JSX permite que você misture HTML e JavaScript de maneira concisa e expressiva. Com o JSX, você pode criar componentes funcionais ou de classe. Vejamos um exemplo mais prático de componente funcional no React que exibe uma lista de tarefas:

import React from 'react';

function TodoList(props) {
  return (
    <ul>
      {props.todos.map((todo, index) => (
        <li key={index}>{todo}</li>
      ))}
    </ul>
  );
}

export default TodoList;

Vamos analisar o código, destacando como o JSX funciona neste caso:

Primeiro, importamos a biblioteca React, que é necessária para usar JSX e criar componentes no React.
Em seguida, definimos um componente funcional chamado TodoList. Ele recebe um objeto chamado props como argumento. O objeto props é usado para passar dados de um componente pai para um componente filho no React. Neste caso, esperamos que o componente pai passe um array chamado todos para o nosso componente TodoList.
Dentro do componente, usamos JSX para criar a interface visual. JSX é uma extensão de sintaxe que permite escrever HTML dentro do JavaScript. Neste exemplo, criamos uma lista não ordenada (<ul>).
Usando chaves ({}), podemos inserir expressões JavaScript diretamente no JSX. Neste caso, usamos a função map para iterar sobre o array todos e criar um elemento de lista (<li>) para cada tarefa.
Para cada tarefa, criamos um elemento de lista <li> com um atributo key que recebe o index do elemento no array. O atributo key é usado pelo React para identificar de forma eficiente quais itens da lista foram alterados, adicionados ou removidos quando a lista é atualizada. Dentro do elemento de lista, usamos chaves novamente para exibir o conteúdo da tarefa ({todo}).
Por fim, exportamos o componente TodoList para que ele possa ser usado em outros lugares do projeto.

2.2 Templates no Vue.js

Vue.js, por outro lado, utiliza templates baseados em HTML para definir a estrutura e a aparência dos componentes. Um componente Vue.js é composto por três partes: o template, o script e o estilo. Vamos ver um exemplo de componente Vue.js que exibe uma lista de tarefas:

<template>
  <ul>
    <li v-for="(todo, index) in todos" :key="index">
      {{ todo }}
    </li>
  </ul>
</template>

<script>
export default {
  props: ['todos'],
};
</script>

Em Vue.js, a interface visual do componente é definida dentro da tag <template>. Neste exemplo, criamos uma lista não ordenada (<ul>).
Usamos a diretiva v-for para iterar sobre o array todos e criar um elemento de lista (<li>) para cada tarefa. A diretiva v-for é uma funcionalidade específica do Vue.js que permite repetir elementos com base em uma fonte de dados. Neste caso, a fonte de dados é o array todos.
A expressão (todo, index) in todos define um par de variáveis (todo e index) para cada elemento no array todos. A variável todo representa o valor do elemento atual, e index representa a posição do elemento no array.
Usamos o atributo :key para vincular o valor da propriedade key do elemento de lista ao index. A propriedade key é usada pelo Vue.js para identificar de forma eficiente quais itens da lista foram alterados, adicionados ou removidos quando a lista é atualizada.
Para exibir o conteúdo da tarefa, usamos a interpolação {{ todo }}. A interpolação é uma funcionalidade do Vue.js que permite inserir o valor de uma variável ou expressão JavaScript diretamente no template HTML.
Na tag <script>, definimos as opções do componente. No nosso caso, especificamos a propriedade props, que é um array contendo o nome das propriedades que o componente espera receber do componente pai. Neste exemplo, esperamos receber uma propriedade chamada todos.

2.3 Comparação de sintaxe entre React e Vue.js

O JSX permite misturar JavaScript e HTML de forma mais direta, enquanto os templates do Vue.js mantêm uma separação mais clara entre a estrutura HTML e a lógica do componente.
O JSX pode ser mais familiar para desenvolvedores com experiência em JavaScript, enquanto os templates do Vue.js podem ser mais acessíveis para aqueles com experiência em HTML e CSS.
O Vue.js oferece uma sintaxe de template mais simples e declarativa, enquanto o React, com JSX, requer que os desenvolvedores usem a sintaxe do JavaScript para manipular elementos, como loops e condicionais.

2.4 Diretivas do Vue.js e como elas se comparam ao React

As diretivas são recursos específicos do Vue.js que permitem manipular o DOM de forma declarativa. Elas são expressas como atributos HTML personalizados que começam com o prefixo v-. As diretivas podem ser comparadas ao uso de atributos especiais ou manipulação de DOM no React. Vamos explorar algumas diretivas comuns do Vue.js e como elas se comparam ao React.

2.4.1 v-if e v-else

As diretivas v-if e v-else no Vue.js são usadas para renderização condicional. Elas permitem exibir ou ocultar elementos com base em uma condição. Veja um exemplo de uso das diretivas v-if e v-else no Vue.js:

<template>
  <div>
    <p v-if="isLoggedIn">Bem-vindo, usuário!</p>
    <p v-else>Por favor, faça login.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false,
    };
  },
};
</script>

No exemplo acima, exibimos uma mensagem de boas-vindas se isLoggedIn for verdadeiro e uma mensagem para fazer login se isLoggedIn for falso.

No React, a renderização condicional é feita com expressões JavaScript. Vamos ver um exemplo equivalente no React:

import React, { useState } from 'react';

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <div>
      {isLoggedIn ? (
        <p>Bem-vindo, usuário!</p>
      ) : (
        <p>Por favor, faça login.</p>
      )}
    </div>
  );
}

export default App;

Neste exemplo, usamos o operador ternário (? :) para renderizar condicionalmente o conteúdo com base no valor de isLoggedIn.

2.4.2 v-for

A diretiva v-for no Vue.js é usada para renderizar uma lista de itens com base em uma fonte de dados. Veja um exemplo de uso da diretiva v-for no Vue.js:

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">{{ item }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3'],
    };
  },
};
</script>

No exemplo acima, iteramos sobre o array items usando a diretiva v-for e criamos um elemento de lista para cada item.

No React, a renderização de listas é feita com a função map. Veja um exemplo equivalente no React:

import React from 'react';

function App() {
  const items = ['Item 1', 'Item 2', 'Item 3'];

  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

export default App;

Neste exemplo, usamos a função map para iterar sobre o array items e criar um elemento de lista para cada item, assim como no exemplo do Vue.js.

2.4.3 v-model

A diretiva v-model no Vue.js é usada para vincular campos de formulário a propriedades do componente. Ela cria uma ligação bidirecional entre o campo de formulário e a propriedade do componente. Veja um exemplo de uso da diretiva v-model no Vue.js:

<template>
  <div>
    <input type="text" v-model="message" />
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
    };
  },
};
</script>

No exemplo acima, vinculamos o campo de entrada ao valor da propriedade message usando a diretiva v-model. Quando o valor do campo de entrada é alterado, a propriedade message é atualizada automaticamente.

No React, a vinculação de campos de formulário é feita com o uso de manipuladores de eventos e o estado do componente. Veja um exemplo equivalente no React:

import React, { useState } from 'react';

function App() {
  const [message, setMessage] = useState('');

  return (
    <div>
      <input type="text" value={message} onChange={(e) => setMessage(e.target.value)} />
      <p>{message}</p>
    </div>
  );
}

export default App;

Neste exemplo, usamos o estado do componente (useState) para armazenar o valor da propriedade message e um manipulador de eventos onChange para atualizar o valor de message quando o campo de entrada é alterado.

Em suma, as diretivas do Vue.js fornecem uma sintaxe declarativa para manipular o DOM e facilitar a criação e manutenção de componentes. No React, a manipulação de DOM e a renderização condicional são realizadas com expressões JavaScript e o uso de estado e manipuladores de eventos. Ambas as abordagens têm suas vantagens, e a escolha entre elas pode depender da sua preferência pessoal e experiência como desenvolvedor.

2.5 Estilos

Ao trabalhar com estilos em React e Vue, ambos os frameworks oferecem várias abordagens para estilizar seus componentes. Vamos comparar as diferenças e semelhanças na forma como o React e o Vue.js lidam com estilos, usando exemplos práticos.

2.5.1 Estilos em React

No React, você pode usar tanto estilos inline quanto folhas de estilo externas (CSS). Vamos examinar as duas abordagens:

2.5.1.1 Estilos inline

Em React, você pode aplicar estilos inline aos componentes usando um objeto JavaScript. Os nomes das propriedades CSS são escritos em camelCase, e os valores são atribuídos como strings.

import React from 'react';

function StyledButton(props) {
  const buttonStyle = {
    backgroundColor: 'blue',
    color: 'white',
    padding: '10px',
    borderRadius: '5px',
  };

  return <button style={buttonStyle}>{props.children}</button>;
}

export default StyledButton;

Neste exemplo, criamos um componente StyledButton com estilos inline. Definimos um objeto chamado buttonStyle contendo propriedades CSS. Em seguida, aplicamos o estilo ao elemento <button> usando o atributo style.

2.5.1.2 Tailwind CSS

Talvez a configuração de estilos mais utilizada no React atualmente é com o framework Tailwind. O Tailwind CSS é um framework CSS de baixo nível, altamente personalizável e orientado a classes utilitárias, o que o torna uma excelente escolha para estilizar componentes React.

Primeiro, instale o Tailwind CSS em seu projeto React. Você pode seguir as instruções de instalação na documentação oficial do Tailwind CSS (https://tailwindcss.com/docs/installation).

Após instalar e configurar, você pode começar a usá-lo em seus componentes. Aqui está um exemplo de um componente React estilizado com Tailwind CSS:

import React from 'react';

function Button(props) {
  return (
    <button
      className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
      onClick={props.onClick}
    >
      {props.children}
    </button>
  );
}

export default Button;

Neste exemplo, criamos um componente Button e aplicamos classes utilitárias do Tailwind CSS ao elemento <button>:

bg-blue-500: Define a cor de fundo do botão para um tom de azul.
hover:bg-blue-700: Altera a cor de fundo do botão para um tom de azul mais escuro quando o mouse está sobre ele.
text-white: Define a cor do texto do botão para branco.
font-bold: Aplica uma fonte em negrito ao texto do botão.
py-2: Adiciona um padding vertical de 0.5rem (2 * 0.25rem) ao botão.
px-4: Adiciona um padding horizontal de 1rem (4 * 0.25rem) ao botão.
rounded: Arredonda os cantos do botão.

As classes utilitárias do Tailwind CSS permitem que você aplique rapidamente estilos pré-definidos a seus componentes React sem escrever CSS personalizado.

2.5.1.3 Folhas de estilo externas (CSS)

Você também pode usar folhas de estilo externas para estilizar seus componentes React. Basta criar um arquivo CSS e importá-lo no componente.

// styles.css
.button {
  background-color: blue;
  color: white;
  padding: 10px;
  border-radius: 5px;
}

// StyledButton.js
import React from 'react';
import './styles.css';

function StyledButton(props) {
  return <button className="button">{props.children}</button>;
}

export default StyledButton;

No exemplo acima, criamos um arquivo CSS chamado styles.css e definimos os estilos para a classe .button. Em seguida, importamos a folha de estilo no arquivo StyledButton.js e aplicamos a classe ao elemento <button> usando o atributo className.

2.5.2 Estilos em Vue.js

No Vue.js, você pode usar estilos inline, folhas de estilo externas e estilos de escopo (scoped styles). Vamos examinar as três abordagens:

2.5.2.1 Estilos inline

Assim como no React, você pode aplicar estilos inline aos componentes Vue.js usando um objeto JavaScript.

<template>
  <button :style="buttonStyle">
    <slot></slot>
  </button>
</template>

<script>
export default {
  data() {
    return {
      buttonStyle: {
        backgroundColor: 'blue',
        color: 'white',
        padding: '10px',
        borderRadius: '5px',
      },
    };
  },
};
</script>

Neste exemplo, criamos um componente StyledButton com estilos inline. Definimos um objeto chamado buttonStyle contendo propriedades CSS na função data. Em seguida, aplicamos o estilo ao elemento <button> usando a diretiva :style.

2.5.2.2 Folhas de estilo externas

Você também pode usar folhas de estilo externas para estilizar seus componentes Vue.js. Basta criar um arquivo CSS e importá-lo no componente.

<!-- StyledButton.vue -->
<template>
  <button class="button">
    <slot></slot>
  </button>
</template>

<script>
import './styles.css';

export default {
};
</script>

No exemplo acima, criamos um arquivo CSS chamado styles.css e definimos os estilos para a classe .button. Em seguida, importamos a folha de estilo no arquivo StyledButton.vue e aplicamos a classe ao elemento <button> usando o atributo class.

2.5.2.3 Estilos de escopo (scoped styles)

No Vue.js, você também pode utilizar estilos de escopo, que são estilos aplicados especificamente a um componente, sem afetar outros componentes. Para criar estilos de escopo, adicione o atributo scoped à tag <style> no componente.

<template>
  <button class="button">
    <slot></slot>
  </button>
</template>

<script>
export default {
};
</script>

<style scoped>
.button {
  background-color: blue;
  color: white;
  padding: 10px;
  border-radius: 5px;
}
</style>

Aqui, adicionamos uma tag <style scoped> ao componente StyledButton. Os estilos definidos nesta tag serão aplicados apenas a este componente, sem afetar outros componentes no aplicativo.

3. Gerenciamento de estado e fluxo de dados

Quando se trabalha com aplicações de grande escala, gerenciar o estado e o fluxo de dados entre os componentes pode ser um desafio. React e Vue.js oferecem soluções específicas para facilitar o gerenciamento de estado em suas aplicações: Redux para React e Vuex para Vue.js. Vamos examinar cada abordagem e compará-las.

3.1 Abordagem do React com o Redux

Redux é uma biblioteca popular de gerenciamento de estado usada com o React. Ele segue a arquitetura Flux, que consiste em ações, armazenamento (store) e redutores (reducers). Vamos examinar um exemplo simples para entender como o Redux funciona com o React.

1 - Instale o Redux e o React-Redux em seu projeto:

npm install react-redux

2 - Crie uma ação para alterar o estado. As ações são objetos que descrevem o que aconteceu e como o estado deve mudar:

// actions/counter.js
export const increment = () => {
  return {
    type: 'INCREMENT'
  };
};

No código acima, criamos uma função chamada increment que retorna um objeto com uma propriedade type cujo valor é 'INCREMENT'. Essa ação indica que queremos incrementar o contador.

3 - Crie um redutor para lidar com a ação. Os redutores são funções que determinam como o estado será atualizado com base nas ações:

// reducers/counter.js
const initialState = 0;

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    default:
      return state;
  }
};

export default counterReducer;

Neste exemplo, definimos um estado inicial como 0 e criamos um redutor chamado counterReducer. O redutor verifica o tipo de ação e, se for 'INCREMENT', incrementa o estado. Caso contrário, o estado permanece inalterado.

4 - Combine redutores e crie a store. A store é um objeto que contém o estado da aplicação e permite que os componentes acessem e atualizem esse estado:

// store.js
import { createStore, combineReducers } from 'redux';
import counterReducer from './reducers/counter';

const rootReducer = combineReducers({
  counter: counterReducer
});

const store = createStore(rootReducer);

export default store;

Aqui, usamos combineReducers para combinar todos os redutores em um único objeto e depois usamos createStore para criar a store com o redutor combinado.

5 - Conecte o componente ao Redux:

// Counter.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment } from './actions/counter';

function Counter() {
  const count = useSelector(state => state.counter);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => dispatch(increment())}>Incrementar</button>
    </div>
  );
}

export default Counter;

Neste exemplo, usamos useSelector para acessar o estado do contador e useDispatch para disparar a ação increment ao clicar no botão. Isso atualizará o estado do contador na store.

6 - Conecte a store ao aplicativo:

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import Counter from './Counter';

ReactDOM.render(
  <Provider store={store}>
    <Counter />
  </Provider>,
  document.getElementById('root')
);

Finalmente, usamos o componente Provider do React-Redux para conectar a store ao aplicativo. Agora, o componente Counter terá acesso ao estado e às ações do Redux, permitindo que ele atualize e exiba o valor do contador conforme o usuário interage com ele.

Nesta subseção, mostramos como configurar o Redux em um aplicativo React para gerenciar o estado de um contador simples. Isso envolve criar ações, redutores e uma store, além de conectar o componente à store usando o Provider. Isso permite que o estado seja atualizado e acessado de maneira consistente e previsível em toda a aplicação.

3.2 Abordagem do Vue.js com o Vuex

Vuex é uma biblioteca de gerenciamento de estado especialmente projetada para Vue.js. Ela facilita o gerenciamento de estado centralizado em aplicativos Vue, seguindo um padrão semelhante ao Flux, como o Redux no React. Vamos analisar um exemplo simples para entender como o Vuex funciona com o Vue.js.

1 - Instale o Vuex em seu projeto:

npm install vuex

2 - Crie uma store Vuex. A store é um objeto que contém o estado da aplicação e permite que os componentes acessem e atualizem esse estado:

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  }
});

No código acima, definimos o estado inicial com um contador (count) e criamos as mutações e ações correspondentes. As mutações são funções que modificam diretamente o estado, enquanto as ações são funções que podem conter lógica assíncrona antes de realizar uma mutação.

3 - Conecte o componente ao Vuex:

<!-- Counter.vue -->
<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="increment">Incrementar</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapActions(['increment'])
  }
};
</script>

No exemplo acima, usamos mapState para acessar o estado do contador e mapActions para mapear a ação increment aos métodos do componente. Quando o botão é clicado, a ação increment é chamada, o que, por sua vez, atualiza o estado do contador na store.

4 - Conecte a store ao aplicativo:

// main.js
import Vue from 'vue';
import App from './App.vue';
import store from './store';

new Vue({
  store,
  render: h => h(App)
}).$mount('#app');

Aqui, conectamos a store ao aplicativo Vue, permitindo que o componente Counter acesse o estado e as ações do Vuex.

Neste exemplo, mostramos como configurar o Vuex em um aplicativo Vue.js para gerenciar o estado de um contador simples. Isso envolve criar uma store com estado, mutações e ações, além de conectar o componente à store. Isso permite que o estado seja atualizado e acessado de maneira consistente e previsível em toda a aplicação.

4. Curva de aprendizado e documentação

vamos comparar o nível de dificuldade para aprender React e Vue.js e analisar a qualidade e abrangência da documentação de cada um.

4.1 Nível de dificuldade para aprender React

O React utiliza o JSX, que mistura HTML e JavaScript no mesmo arquivo. Isso pode ser um pouco confuso no início, especialmente para aqueles que são novos no desenvolvimento web.
O gerenciamento de estado, como o Redux, pode ser um pouco difícil de entender no início. No entanto, com a introdução do Hooks, o gerenciamento de estado se tornou mais fácil e mais acessível.
O ecossistema do React é vasto e pode ser intimidante para iniciantes, pois há muitas bibliotecas e ferramentas disponíveis para escolher.

4.2 Nível de dificuldade para aprender Vue.js

O Vue.js usa uma abordagem mais simples e fácil de entender com a separação de HTML, JavaScript e CSS em componentes, semelhante ao desenvolvimento web tradicional.
A curva de aprendizado do Vue.js é considerada mais suave em comparação com o React. Vue.js é projetado para ser progressivo, permitindo aos desenvolvedores adotar apenas as partes que eles precisam.
O gerenciamento de estado no Vue.js com Vuex é mais simples em comparação ao Redux, tornando-o mais fácil de aprender e utilizar.

4.3 Qualidade e abrangência da documentação

A documentação é um aspecto crucial para o aprendizado e adoção de qualquer tecnologia. Vamos comparar a qualidade e abrangência da documentação do React e do Vue.js.

4.3.1 Documentação do React

A documentação oficial do React é extensa e detalhada, abrangendo todos os aspectos do framework. Ela também inclui guias práticos e tutoriais para ajudar os desenvolvedores a começar.
A documentação é atualizada regularmente para refletir as melhores práticas e novos recursos.
A comunidade React é grande e ativa, o que significa que há uma infinidade de recursos de aprendizado, como cursos, artigos e vídeos disponíveis na internet.

4.3.2 Documentação do Vue.js

A documentação oficial do Vue.js é conhecida por ser excepcionalmente bem escrita e fácil de entender, mesmo para iniciantes.
A documentação é mantida e atualizada regularmente, garantindo que os desenvolvedores estejam sempre atualizados sobre as últimas mudanças e melhores práticas.
A comunidade Vue.js, embora menor que a comunidade React, é ativa e engajada. Há muitos recursos disponíveis para aprender Vue.js, incluindo cursos, artigos e vídeos.

Para resumir, ambos os frameworks possuem documentação abrangente e de alta qualidade. A curva de aprendizado do Vue.js é geralmente considerada mais suave em comparação ao React. No entanto, a escolha entre React e Vue.js dependerá das preferências individuais do desenvolvedor e dos requisitos específicos do projeto.

5. Desempenho e otimizações

Nesta seção, vamos comparar o desempenho de React e Vue.js e explorar as otimizações disponíveis em cada framework para garantir que seu aplicativo funcione com eficiência e rapidez.

5.1 Comparação de desempenho entre React e Vue.js

Vamos comparar detalhadamente o desempenho do React e do Vue.js. Para tornar esta comparação amigável aos iniciantes, vamos explicar os termos técnicos e fornecer exemplos sempre que possível.

Antes de prosseguir, é importante lembrar que o desempenho varia dependendo de muitos fatores, como a complexidade da aplicação, a estrutura do código e a otimização. Essa comparação é baseada em aplicações típicas e pode não refletir o desempenho em todos os cenários.

Vamos considerar as seguintes métricas para nossa comparação:
1 - Tamanho do bundle
2 - Velocidade de renderização
3 - Uso de memória

5.1.1 Tamanho do bundle

O tamanho do bundle é uma medida importante para o desempenho, pois afeta o tempo de carregamento da página. Um bundle menor significa que o navegador precisa baixar menos dados para exibir a página, o que resulta em um carregamento mais rápido.

Framework	Tamanho do bundle (minificado e gzipado)
React	~33 KB
Vue.js	~23 KB

Como mostrado na tabela acima, o Vue.js tem um tamanho de bundle menor em comparação ao React. Isso, em geral, o Vue.js proporcionará um tempo de carregamento mais rápido, especialmente em conexões lentas ou dispositivos com menor poder de processamento.

5.1.2 Velocidade de renderização

A velocidade de renderização é uma métrica importante para a experiência do usuário, pois determina o tempo necessário para que os componentes da interface sejam exibidos na tela. Vamos comparar a velocidade de renderização de ambas as bibliotecas.

Framework	Velocidade de renderização (tempo médio em ms)
React	25 ms
Vue.js	20 ms

Os números acima são aproximados e podem variar dependendo de vários fatores, como a complexidade da aplicação e a otimização do código. No entanto, é evidente que o Vue.js oferece uma velocidade de renderização ligeiramente mais rápida em comparação ao React. Isso pode ser especialmente importante para aplicações com um grande número de componentes dinâmicos.

5.1.3 Uso de memória

O uso de memória é outra métrica importante a ser considerada, já que um uso excessivo de memória pode levar a um desempenho lento e problemas de responsividade. Vamos comparar o uso de memória do React e do Vue.js.

Framework	Uso de memória (média em MB)
React	40 MB
Vue.js	35 MB

Os valores na tabela acima indicam o uso médio de memória para aplicações construídas com React e Vue.js. Embora ambos os frameworks gerenciem bem o uso de memória, o Vue.js apresenta um uso médio ligeiramente menor em comparação ao React. Isso pode ser benéfico para dispositivos com recursos limitados ou aplicações que exigem muita interação com o usuário.

Tanto o React quanto o Vue.js são excelentes opções para o desenvolvimento de interfaces de usuário. No entanto, conforme a comparação acima mostra, o Vue.js leva uma ligeira vantagem no tamanho do bundle, velocidade de renderização e uso de memória.

É importante lembrar que a escolha entre React e Vue.js deve ser baseada no contexto do projeto e nas necessidades específicas da aplicação. Além do desempenho, considere outros fatores como a curva de aprendizado, a comunidade, a disponibilidade de bibliotecas e a facilidade de integração com outras tecnologias.

Assim, o Vue.js pode ser uma opção mais adequada para projetos que buscam otimizar o desempenho, especialmente em dispositivos com recursos limitados ou em conexões lentas. Por outro lado, o React é uma escolha sólida para projetos que exigem maior flexibilidade e uma ampla gama de bibliotecas e ferramentas disponíveis.

5.2 Otimizações disponíveis em cada framework

5.2.1 Otimizações no React:

React.memo: Esta é uma técnica de otimização de desempenho que permite memorizar componentes funcionais e evitar a renderização desnecessária. É útil quando você tem componentes que renderizam dados idênticos e raramente mudam.
React.lazy: Permite carregar componentes de maneira "lazy" (preguiçosa), o que significa que eles serão carregados apenas quando forem necessários. Isso melhora o desempenho, especialmente em aplicativos grandes com muitos componentes.
React.PureComponent: Esta classe estende a classe React.Component e realiza uma verificação superficial dos objetos de propriedades e estados, ajudando a evitar renderizações desnecessárias e melhorando o desempenho.

5.2.2 Otimizações no Vue.js:

Componentes assíncronos: O Vue.js suporta componentes assíncronos, que são carregados sob demanda apenas quando são necessários, melhorando a velocidade de carregamento inicial do aplicativo.
v-if e v-show: Estas diretivas do Vue.js permitem renderizar condicionalmente elementos no DOM. A diretiva v-if remove completamente o elemento do DOM quando a condição é falsa, enquanto a diretiva v-show apenas altera o estilo CSS para ocultar o elemento. Ambas as diretivas podem ser usadas para otimizar a renderização e melhorar o desempenho.
Computed properties: As propriedades computadas no Vue.js são usadas para calcular valores derivados com base nos dados de um componente. Elas são armazenadas em cache e só são reavaliadas quando as dependências são alteradas. Isso evita a reavaliação desnecessária e melhora o desempenho.

Tanto React quanto Vue.js oferecem várias técnicas de otimização para melhorar o desempenho de seus aplicativos. A escolha do framework mais adequado dependerá de fatores como a complexidade do projeto, a familiaridade com a sintaxe e as preferências pessoais. Ambos os frameworks têm uma grande comunidade e ampla documentação, o que significa que você encontrará muitos recursos e ferramentas para ajudá-lo a otimizar o desempenho do seu aplicativo, independentemente do framework escolhido.

6. Comunidade e ecossistema

Nesta seção, vamos explorar a comunidade e o ecossistema em torno de React e Vue.js, abordando o tamanho da comunidade, a disponibilidade de bibliotecas e plugins de terceiros e o suporte e atualizações oferecidos pelos respectivos projetos.

6.1 Comparação do tamanho da comunidade e contribuições

A comunidade e o suporte em torno de um framework são fatores cruciais para o sucesso na adoção da tecnologia. Vamos comparar o tamanho das comunidades e contribuições para React e Vue.js.

Tabela: Estatísticas da comunidade e contribuições

Métrica	React	Vue.js
Estrelas no GitHub	174.000+	193.000+
Forks no GitHub	34.000+	31.000+
Contribuidores no GitHub	1.500+	350+
Questões fechadas no Stack Overflow	300.000+	80.000+
Downloads mensais no NPM	10.000.000+	2.000.000+

Embora o React seja mais antigo e tenha uma comunidade maior, o Vue.js também tem uma comunidade ativa e crescente. As estatísticas mostram que ambos os frameworks têm um grande número de contribuidores e usuários ativos. No entanto, o React tem um número significativamente maior de questões fechadas no Stack Overflow e downloads mensais no NPM, indicando uma adoção mais ampla na comunidade de desenvolvedores.

6.2 Disponibilidade de bibliotecas e plugins de terceiros

A disponibilidade de bibliotecas e plugins de terceiros é um aspecto essencial para a escolha de uma biblioteca ou framework para desenvolvimento web. Ambos React e Vue.js possuem uma vasta seleção de bibliotecas e plugins, mas é crucial entender as diferenças e as características que os distinguem.

6.2.1 Bibliotecas React

Graças à sua ampla adoção, a comunidade React é grande e ativa, resultando em uma enorme quantidade de bibliotecas e plugins disponíveis para facilitar o desenvolvimento de aplicações.

Algumas das principais categorias de bibliotecas e plugins disponíveis para o React incluem:

Gerenciamento de estado: Redux, MobX, Recoil
Roteamento: React Router, Reach Router
Estilização e componentes de UI: Material-UI, Ant Design, Bootstrap, Chakra UI
Formulários e validação: Formik, React Hook Form, Yup
Testes e documentação: Jest, React Testing Library, Storybook De acordo com o npm, o maior registro de pacotes JavaScript, existem mais de 80.000 pacotes relacionados ao React disponíveis.

6.2.2 Bibliotecas Vue.js

Ao longo dos anos, Vue.js também ganhou uma comunidade ativa e crescente, levando a um aumento significativo na disponibilidade de bibliotecas e plugins.

As principais categorias de bibliotecas e plugins disponíveis para o Vue.js incluem:

Gerenciamento de estado: Vuex, Vue.observable
Roteamento: Vue Router
Estilização e componentes de UI: Vuetify, Quasar, Element UI, BootstrapVue
Formulários e validação: VeeValidate, Vue Formulate
Testes e documentação: Vue Test Utils, Jest, Vue Styleguidist

O registro npm indica que existem mais de 30.000 pacotes relacionados ao Vue.js.

Considerações Finais

Neste artigo, analisamos as principais semelhanças e diferenças entre React e Vue.js, dois dos frameworks de desenvolvimento web mais populares atualmente. Ambos possuem suas vantagens e desvantagens, e a escolha entre os dois dependerá das necessidades específicas de seu projeto. Nesta seção final, vamos resumir as principais semelhanças e diferenças entre React e Vue.js e fornecer algumas orientações sobre como escolher o melhor framework para o seu projeto.

Resumo das principais semelhanças e diferenças

React e Vue.js compartilham várias semelhanças, como a abordagem baseada em componentes, o uso de uma árvore virtual do DOM e a reatividade do estado. No entanto, eles também apresentam algumas diferenças-chave que podem influenciar a sua escolha. Aqui está uma tabela detalhada que ilustra as principais semelhanças e diferenças entre React e Vue.js:

Característica	React	Vue.js
Empresa Mantenedora	Facebook	Comunidade Open Source (Evan You)
Lançamento	2013	2014
Popularidade	Muito popular (mais estrelas no GitHub)	Popular (menos estrelas no GitHub)
Abordagem	Baseado em componentes e biblioteca focada	Framework completo e integrado
Curva de Aprendizado	Moderada	Mais fácil e amigável
Sintaxe	JSX	HTML, CSS e JavaScript (opcionalmente, JSX)
Gerenciamento de Estado	Redux, MobX, Context API	Vuex
Performance	Excelente	Excelente
Comunidade e Ecossistema	Amplo e maduro	Crescente e diversificado
Empregabilidade	Alta demanda no mercado	Demanda crescente no mercado

Orientação sobre como escolher entre React e Vue.js

Para escolher entre React e Vue.js, considere os seguintes fatores com base nas necessidades específicas de seu projeto:

1 - Curva de aprendizado: Se você é iniciante e busca um framework fácil de aprender, Vue.js é a escolha mais amigável. Sua documentação é clara e abrangente, e sua sintaxe é mais próxima do HTML, CSS e JavaScript padrão.

2 - Tamanho do projeto: Se você está desenvolvendo um projeto de grande escala e precisa de um ecossistema amplo e maduro, o React pode ser mais adequado. Por outro lado, se você está trabalhando em um projeto menor ou de médio porte, Vue.js pode ser uma opção mais leve e flexível.

3 - Empregabilidade: Se você está buscando aprimorar suas habilidades para fins de empregabilidade, o React tem uma demanda maior no mercado. No entanto, o Vue.js também tem visto uma demanda crescente, especialmente em startups e empresas menores.

4 - Integração com outras tecnologias: Se você precisa integrar seu projeto com outras bibliotecas e tecnologias, o React é mais versátil e possui uma grande comunidade que pode ajudá-lo a encontrar soluções para problemas específicos. No entanto, Vue.js também tem uma comunidade crescente e diversificada, e pode ser mais fácil de integrar com tecnologias tradicionais da web.

5 - Preferências pessoais: A escolha entre React e Vue.js também pode ser uma questão de gosto pessoal. Se você prefere trabalhar com JSX e gosta da abordagem da biblioteca focada do React, esta pode ser a opção certa para você. Por outro lado, se você prefere a sintaxe mais próxima do HTML e um framework mais integrado, o Vue.js pode ser uma escolha melhor.

6 - Suporte e manutenção: Ambos os frameworks possuem uma comunidade ativa e um histórico de atualizações regulares e melhorias. No entanto, o React é mantido pelo Facebook, o que pode trazer uma sensação de maior estabilidade e apoio corporativo. Por outro lado, o Vue.js é mantido por uma comunidade open-source liderada por Evan You, o que pode ser mais atraente para desenvolvedores que preferem soluções de código aberto e comunitárias.

7 - Performance: Tanto React quanto Vue.js oferecem excelente performance, e as diferenças nesse aspecto são geralmente mínimas. No entanto, dependendo do caso de uso específico, um framework pode ter uma ligeira vantagem sobre o outro. Faça uma análise cuidadosa das necessidades de performance do seu projeto e verifique se há algum benchmark ou relato de experiência que indique qual dos dois frameworks se sairia melhor no seu cenário.

Desta maneira, a escolha entre React e Vue.js dependerá das necessidades específicas do seu projeto, suas preferências pessoais e sua experiência anterior. Ambos os frameworks são excelentes opções para o desenvolvimento web moderno e oferecem uma ampla gama de recursos e benefícios. Ao levar em conta os fatores mencionados acima, você estará mais bem preparado para tomar uma decisão informada e selecionar o framework que melhor atende às necessidades do seu projeto.

🛣O Guia Definitivo sobre Rotas com React Router

Marcelo Petry — Thu, 02 Feb 2023 01:47:49 +0000

Rotas em React são responsáveis por determinar como os usuários navegam pelo seu aplicativo. Quando um usuário clica em um link ou digita uma URL, a rota controla qual página do aplicativo será exibida para o usuário. Por exemplo, se você estiver desenvolvendo um aplicativo de compras on-line, poderá ter uma rota para a página inicial, uma rota para a página de categorias, uma rota para a página de produtos, uma rota para a página de carrinho de compras, etc.

Ter uma estrutura de rotas clara e fácil de entender é importante porque ajuda a melhorar a navegação e a experiência do usuário. Além disso, também pode ajudar a proteger certas páginas de acesso não autorizado e garantir que o usuário seja redirecionado para a página correta após realizar determinadas ações.

Felizmente, a biblioteca React Router facilita a criação de uma estrutura de rotas clara e organizada em um aplicativo React. A seguir, veremos como configurar e usar o React Router para criar uma estrutura de rotas eficiente em seu aplicativo React.

Neste guia, você verá:

Instalação do React Router
Componentes Básicos do React Router
Hooks Básicos do React Router
Conceitos Adicionais sobre Rotas
Rotas Exatas
Rotas Simples
Parâmetros de Rotas
Tópicos Avançados em React Router
Proteção de Rotas
Query Strings
Lidando com Query Strings no React Router V6+
Considerações Finais

Instalação do React Router

Há duas maneiras de instalar o React Router: usando npm ou yarn.

Se você estiver usando npm, pode instalar o React Router digitando o seguinte comando no terminal:

npm install react-router-dom

Se você estiver usando yarn, pode instalar o React Router digitando o seguinte comando no terminal:

yarn add react-router-dom

Agora que o React Router está instalado, podemos começar a configurá-lo.

Componentes Básicos do React Router

Tomando-se como referência a última versão da biblioteca React Router nesta data (v6.8.0), os principais componentes são:

BrowserRouter: O BrowserRouter é usado para fornecer a funcionalidade de roteamento ao seu aplicativo React. Ele é responsável por gerenciar as mudanças de URL e rotas na página do seu aplicativo. Quando o usuário clica em um link ou digita uma URL na barra de endereços do navegador, o BrowserRouter detecta essa mudança e faz a renderização da página correta de acordo com a rota definida.
Routes: O componente Routes do React Router é usado para gerenciar as rotas da aplicação. Ele é responsável por renderizar o componente correto para a URL atual da página. O componente Routes precisa ser envolvido por um componente do React Router, como o BrowserRouter ou MemoryRouter, para funcionar.
Route: O componente Route é um dos componentes-chave do React Router. Ele é usado para criar rotas na sua aplicação, determinando quais componentes serão renderizados para cada URL específica.

Vejamos um exemplo de como os componentes BrowserRouter, Routes e Route podem ser usados na prática:

import React from 'react';
// Importamos o componente BrowserRouter e o componente Routes do pacote react-router-dom
import { BrowserRouter, Routes, Route } from 'react-router-dom';

// Importamos as páginas HomePage, AboutPage e ContactPage
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
import ContactPage from './pages/ContactPage';

// Função principal do componente App
function App() {
  return (
    // Envolve o componente App com o componente BrowserRouter
    <BrowserRouter>
      {/* O componente Routes permite que você crie várias rotas que são renderizadas com base na URL atual */}
      <Routes>
        {/* Adiciona uma rota com o caminho exato "/", que renderiza o componente HomePage */}
        <Route path="/" element={<HomePage />} />
        {/* Adiciona uma rota com o caminho "/about", que renderiza o componente AboutPage */}
        <Route path="/about" element={<AboutPage />} />
        {/* Adiciona uma rota com o caminho "/contact", que renderiza o componente ContactPage */}
        <Route path="/contact" element={<ContactPage />} />
      </Routes>
    </BrowserRouter>
  );
}

// Exporta o componente App como padrão
export default App;

O código acima é uma aplicação React que usa o React Router para gerenciar as rotas em seu aplicativo. Aqui está uma explicação passo a passo do código:

1 - Importamos as dependências necessárias para usar o React Router. Primeiro, importamos o componente BrowserRouter e o componente Routes do pacote react-router-dom.

2 - Em seguida, importamos as páginas HomePage, AboutPage e ContactPage. Essas são as três páginas diferentes que nossa aplicação irá exibir, dependendo da rota atual.

3 - Definimos a função App, que é o componente principal da nossa aplicação. Dentro dessa função, usamos o componente BrowserRoutercomo envoltório para o resto da aplicação.

4 - Dentro do componente BrowserRouter, usamos o componente Routespara gerenciar as rotas em nossa aplicação. O componente Routes permite que você crie várias rotas que são renderizadas com base na URL
atual.

5 - Em seguida, usamos o componente Route para adicionar três rotas diferentes à nossa aplicação. Cada rota é definida com uma propriedade path que indica a URL a ser exibida e uma propriedade element que indica o componente a ser renderizado para aquela URL. A primeira rota tem o caminho exato /, que renderiza o componente HomePage. A segunda rota tem o caminho /about, que renderiza o componente AboutPage. A terceira rota tem o caminho /contact, que renderiza o componente ContactPage.

6 - Finalmente, exportamos o componente App como padrão, permitindo que seja usado em outros arquivos da aplicação.

Switch: O Switch é um componente do React Router que permite que você selecione apenas uma rota para ser renderizada dentre várias rotas definidas. Isso é útil quando você tem várias rotas que compartilham um prefixo comum na URL, mas deseja mostrar apenas uma dessas rotas. Aqui está um exemplo de código:

import { Switch, Route } from 'react-router-dom';

function App() {
  return (
    <Switch>
      {/* A rota "/" será renderizada se a URL atual for "/" */}
      <Route exact path="/">
        <Home />
      </Route>
      {/* A rota "/about" será renderizada se a URL atual for "/about" */}
      <Route path="/about">
        <About />
      </Route>
      {/* Esta é a rota "padrão" que será renderizada se nenhuma das rotas acima for combinar com a URL atual */}
      <Route path="*">
        <NotFound />
      </Route>
    </Switch>
  );
}

Neste exemplo, usamos o componente Switch para envolver nossas rotas.

Dentro dele, usamos o componente Route para definir as rotas diferentes que o aplicativo pode ter. A propriedade exact em <Route exact path="/"> significa que a rota só será renderizada se a URL atual for exatamente /. Se omitirmos exact, a rota seria renderizada para todas as URLs que começarem com /, como /about.

Finalmente, a rota <Route path="*"> é a rota padrão que será renderizada se nenhuma das outras rotas combinar com a URL atual.

Quando o usuário navega no aplicativo, o endereço da URL mudará de acordo com a página em que o usuário está. O React Router usa essa URL para determinar qual rota deve ser renderizada.

Se nenhuma das rotas definidas dentro do Switch combinar com a URL atual, a rota padrão será renderizada. Por exemplo, se o usuário estiver na URL /invalid, nenhuma das rotas definidas dentro do Switch combinará com esta URL. Neste caso, a rota <Route path="*"> será renderizada, mostrando o componente NotFound.

Em outras palavras, o Switch ajuda a garantir que apenas uma rota seja renderizada a qualquer momento, dependendo da URL atual.

Link: O componente Link do React Router é uma forma simples de criar links para outras páginas em seu aplicativo. Em vez de usar um elemento a normal para navegar entre páginas, você usa o componente Link, que fornece algumas vantagens, como manter o histórico do navegador e evitar recarregar a página inteira.

Aqui está um exemplo de código para criar um link para a página inicial de seu aplicativo:

import { Link } from 'react-router-dom';

function HomeLink() {
  return (
    <Link to="/">
      Home
    </Link>
  );
}

Neste exemplo, estamos importando o componente Link do pacote reactrouter-dom. Em seguida, criamos uma função HomeLink que retorna um componente Link. O atributo to é usado para especificar a URL para a qual o link deve levar. Finalmente, dentro do componente Link, colocamos o texto que será exibido como link na página.

NavLink: O NavLink é um componente do React Router que permite a criação de links para outras páginas ou rotas em sua aplicação. Ele funciona de forma similar ao elemento HTML <a>, mas com algumas vantagens extras, como a capacidade de ativar estilos específicos quando o usuário está na página associada ao link. o NavLink é frequentemente usado em menus, como navbars.

Aqui está um exemplo de como você pode usar o NavLink em um componente de menu navbar:

import React from "react";
import { NavLink } from "react-router-dom";

function Navbar() {
  return (
    <nav>
      <ul>
        <li>
          {/* Cria o link Home */}
          <NavLink 
            exact 
            to="/" 
            activeClassName="selected">
            Home
          </NavLink>
        </li>
        <li>
          {/* Cria o link About */}
          <NavLink 
            to="/about" 
            activeClassName="selected">
            About
          </NavLink>
        </li>
        <li>
          {/* Cria o link Contact */}
          <NavLink 
            to="/contact" 
            activeClassName="selected">
            Contact
          </NavLink>
        </li>
      </ul>
    </nav>
  );
}

export default Navbar;

Este código cria um componente React chamado Navbar que renderiza um menu de navegação. O componente usa o NavLink do React Router para criar links para diferentes páginas na aplicação.

A estrutura básica do componente é uma <nav> que contém uma lista <ul> com três itens de menu, cada um contendo um link. Cada link é criado usando o componente NavLink, especificando a URL a ser navegada quando o usuário clicar no link com a propriedade to.

A propriedade exact especifica que o link deve ser uma correspondência exata com a URL, ou seja, apenas a página inicial corresponderá exatamente à URL raiz (/).

A propriedade activeClassName especifica o nome da classe CSS que será aplicada ao link quando o usuário estiver na página associada ao link.

Neste exemplo, a classe selected será aplicada.

Por fim, o componente é exportado como default para ser usado em outros lugares da aplicação.

Navigate: O componente Navigate do React Router é usado para navegar entre as rotas em uma aplicação React. É uma maneira simples de mudar de página sem precisar atualizar a página inteira. Em vez disso, ele apenas atualiza a parte da página que é exibida na rota atual.

Aqui está um exemplo de código que mostra como usar o Navigate para navegar de uma página para outra:

import { Navigate } from "react-router-dom";

function Example() {
  return (
    <div>
      {/* Exibe o título da página atual */}
      <h1>Minha página atual</h1>
      <button>
        {/* Usa o componente Navigate para navegar para a rota "/outra-página" */}
        <Navigate to="/outra-pagina">Ir para outra página</Navigate>
      </button>
    </div>
  );
}

Neste exemplo, estamos importando o componente Navigate do pacote react-router-dom. Em seguida, estamos criando uma função Example que retorna um elemento div com um cabeçalho e um botão.

Quando o usuário clicar no botão, o componente Navigate será acionado e a rota será alterada para /outra-pagina. Isso significa que a página será atualizada com o conteúdo da nova rota, sem atualizar a página inteira.

Estes foram apenas alguns dos componentes básicos mais utilizados da biblioteca React Router. Não deixe de acessar os documentos oficiais para conhecer os demais componentes e suas funcionalidades: https://reactrouter.com/en/main

Hooks Básicos do React Router

Agora, exploraremos alguns dos hooks mais populares da biblioteca React Router e como eles podem ser usados para melhorar a funcionalidade e a experiência do usuário em sua aplicação.

Hooks são uma funcionalidade no React que permitem que você compartilhe lógica de estado entre componentes sem ter que escrever componentes de classe. No React Router, os hooks permitem que você acesse e manipule informações da rota em sua aplicação, como a URL atual, o histórico de navegação e os parâmetros da rota. Eles são uma maneira fácil e poderosa de adicionar funcionalidade à sua aplicação.

Quando se trata de definir rotas em sua aplicação, é importante escolher a abordagem certa para atender às suas necessidades. Você pode usar um componente como Route ou Switch para definir rotas, ou pode usar um hook como useRoutes para renderizar rotas condicionalmente. A escolha entre um componente e um hook depende da complexidade de suas rotas e da funcionalidade que você precisa adicionar à sua aplicação. Abaixo, vamos explorá-los em detalhes.

useRoutes: O hook useRoutes do React Router é usado para renderizar rotas condicionalmente com base nas condições fornecidas. É uma alternativa ao uso de Route e Switch para definir rotas em sua aplicação.

Aqui está um exemplo de como usar o hook useRoutes:

import { useRoutes } from "react-router-dom";

const routes = [
  // Rota para a página inicial
  {
    path: "/",
    element: <Home />
  },
  // Rota para a página de login
  {
    path: "/login",
    element: <Login />
  },
  // Rota condicional para o dashboard
  {
    path: /^\/dashboard/,
    element: isLoggedIn ? <Dashboard /> : <Redirect to="/login" />
  }
];

function App() {
  // Obtém o resultado da rota atual
  const routeResult = useRoutes(routes);

  // Renderiza o resultado da rota atual
  return <div>{routeResult}</div>;
}

Neste exemplo, o hook useRoutes é usado para renderizar diferentes componentes dependendo da URL atual. Temos três rotas definidas em routes: uma para a página inicial ("/"), uma para a página de login ("/login") e uma para o dashboard ("/dashboard").

A rota para o dashbaord é condicional: se a variável isLoggedIn for verdadeira, o usuário será redirecionado para o dashboard, caso contrário, será redirecionado para a página de login.

O resultado do hook useRoutes é atribuído à variável routeResult e, em seguida, renderizado na tela usando {routeResult}.

Este exemplo mostra como o hook useRoutes pode ser usado para adicionar funcionalidade condicional à sua aplicação, permitindo que você defina rotas de maneira fácil e eficiente.

useParams: O hook useParams é um hook do React Router que permite acessar os parâmetros da URL da rota atual. Ele retorna um objeto que contém as chaves e valores dos parâmetros da URL.

Por exemplo, se você tiver uma rota com a URL /users/:id, você pode usar o hook useParams para acessar o valor do ID do usuário.

Veja abaixo um exemplo de como usar o hook useParams:

import { useParams } from 'react-router-dom';

function UserDetail() {
  // Usa o hook useParams para acessar os parâmetros da URL
  const { id } = useParams();

  return (
    <div>
      <h1>Detalhes do usuário {id}</h1>
    </div>
  );
}

A primeira linha importa o hook useParams do pacote react-router-dom.

A função UserDetail é um componente React que será renderizado quando a URL da rota corresponder a uma rota que inclui um parâmetro, como /usuarios/:id.

Dentro da função UserDetail, o hook useParams é chamado usando const { id } = useParams(). Este hook retorna um objeto que contém as chaves e valores dos parâmetros da URL. No caso deste exemplo, o objeto terá uma chave id e um valor que corresponde ao ID do usuário passado na URL.

O componente UserDetail renderiza um elemento div que contém um cabeçalho h1 que exibe o texto "Detalhes do usuário" seguido pelo valor do ID do usuário acessado pelo hook useParams.

Por exemplo, se a URL da rota for /usuarios/123, o componente UserDetail renderizará o seguinte HTML:

<div>
  <h1>Detalhes do usuário 123</h1>
</div>

useLocation: O hook useLocation permite que você acesse informações sobre a URL atualmente exibida no navegador. É uma forma de ter informações sobre a rota que o usuário está visualizando no momento.

Vejamos um exemplo de como ele pode ser útil:

import { useLocation } from 'react-router-dom';

function ScrollToTopOnMount() {
  const { pathname } = useLocation();

  // sempre que a rota muda, faça o scroll da página para o topo
  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
}

Neste exemplo, estamos usando useLocation para acessar o pathname da rota atual. Quando o pathname muda, o useEffect é executado e faz o scroll da página para o topo. Isso garante que ao mudar de rota, o usuário sempre comece vendo o topo da página, independentemente de onde estivesse na página anterior.

Outro exemplo importante para entendermos o useLocation no React Router seria:

import { useLocation } from 'react-router-dom';

function HighlightActiveNavLink() {
  // Acessa informações sobre a URL atual usando o hook useLocation
  const location = useLocation();

  return (
    <nav>
      <ul>
        <li className={location.pathname === '/' ? 'active' : ''}>
          <Link to="/">Home</Link>
        </li>
        <li className={location.pathname === '/about' ? 'active' : ''}>
          <Link to="/about">About</Link>
        </li>
        <li className={location.pathname === '/contact' ? 'active' : ''}>
          <Link to="/contact">Contact</Link>
        </li>
      </ul>
    </nav>
  );
}

Aqui, estamos usando o hook useLocation para acessar informações sobre a URL atual. Em seguida, estamos comparando o valor da propriedade pathname da variável location com diferentes rotas para verificar qual deles é a rota atual. Finalmente, estamos adicionando uma classe active ao item de menu correto para destacá-lo visualmente como o link ativo.

useNavigate: O hook useNavigate é usado no React Router para navegar programaticamente entre as rotas de uma aplicação. Em vez de clicar em um link para mudar de página, você pode usar o hook useNavigate para mudar de página a partir de um componente.

Por exemplo, imagine que você tenha um formulário de contato em sua aplicação e, após o usuário enviar o formulário, você gostaria de redirecioná-lo para uma página de agradecimento:

import { useNavigate } from 'react-router-dom';

function ContactForm() {
  // Importa o hook `useNavigate` para poder navegar para outras páginas
  const navigate = useNavigate();

  const handleSubmit = event => {
    event.preventDefault();
    // Aqui você pode adicionar a lógica para enviar o formulário ao seu back-end
    // ...

    // Depois de enviar o formulário com sucesso, navegue para a página de agradecimento
    navigate('/obrigado');
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* Seu formulário de contato aqui */}
      <button type="submit">Enviar</button>
    </form>
  );
}

Neste exemplo, usamos o hook useNavigate para importar a função navigate. Em seguida, quando o usuário submete o formulário, chamamos a função navigate e passamos a URL para a página de agradecimento, que é '/obrigado' neste exemplo.

Isso fará com que o usuário seja redirecionado para a página de agradecimento após o envio bem-sucedido do formulário.

useHistory: O hook useHistory do React Router nos permite ter acesso ao objeto history da nossa aplicação, o que significa que podemos navegar para diferentes páginas sem precisar usar links ou botões. Esse hook é muito útil quando queremos navegar para outra página de forma programática, ou seja, a partir de uma ação do usuário ou de algum evento.

Vamos ver um exemplo de como podemos utilizar o useHistory para navegar para uma página de detalhes a partir de um componente de listagem:

import React from 'react';
import { useHistory } from 'react-router-dom';

function ProductList() {
  // Acessamos o objeto history com o hook useHistory
  const history = useHistory();

  function handleClick(id) {
    // Usamos o método push do objeto history para navegar para outra página
    history.push(`/products/${id}`);
  }

  return (
    <ul>
      <li onClick={() => handleClick(1)}>Produto 1</li>
      <li onClick={() => handleClick(2)}>Produto 2</li>
      <li onClick={() => handleClick(3)}>Produto 3</li>
    </ul>
  );
}

Aqui, o hook useHistory é usado para acessar o objeto history, que permite navegar entre as páginas da aplicação.

1 - Primeiramente, importamos o hook useHistory do pacote react-router-dom.

2 - Em seguida, criamos uma função chamada ProductList, que será o nosso componente de lista de produtos.

3 - Dentro desta função, usamos o hook useHistory para acessar o objeto history.

4 - Criamos uma função chamada handleClick, que será chamada quando o usuário clicar em um produto na lista.

5 - A função handleClick usa o método push do objeto history para navegar para a página de detalhes do produto. O método push recebe como argumento o caminho da página para onde queremos navegar, no formato /products/{id}, onde {id} é o ID do produto que o usuário clicou.

6 - Por fim, retornamos uma lista de elementos HTML li que representam os produtos. Cada elemento tem um onClick que chama a função handleClick passando o ID do produto.

Dessa forma, apesar da navegação ser acionada ao clique do usuário, a troca de páginas é mais automatizada, já que o clique no link do produto está sendo tratado dentro do componente, ao invés de ser feito diretamente na página HTML.

Isso significa que é possível colocar lógicas dentro do componente que determinem para onde o usuário deve ser direcionado de acordo com certas condições, antes de redirecioná-lo.

Para compreendermos melhor, vamos ver mais um exemplo no qual o useHistory é comumente usado:

import React, { useState } from 'react';
import { useHistory } from 'react-router-dom';

function Login() {
  // Acessamos o objeto history com o hook useHistory
  const history = useHistory();

  // Mantemos o estado do formulário de login
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  // Função chamada quando o formulário é enviado
  function handleSubmit(event) {
    event.preventDefault();

    // Aqui você pode colocar o código para autenticar o usuário
    // Suponha que o usuário está autenticado
    const isAuthenticated = true;

    if (isAuthenticated) {
      // Navegamos para a página inicial se o usuário for autenticado
      history.push('/');
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={username}
        onChange={(event) => setUsername(event.target.value)}
        placeholder="Nome de usuário"
      />
      <input
        type="password"
        value={password}
        onChange={(event) => setPassword(event.target.value)}
        placeholder="Senha"
      />
      <button type="submit">Entrar</button>
    </form>
  );
}

Neste exemplo, quando o usuário preenche o formulário de login e clica no botão Entrar, a função handleSubmit é chamada. Nela, fazemos a validação de autenticação do usuário (neste caso, supomos que ele está autenticado).

Se o usuário for autenticado, usamos o método push do objeto history para navegar para a página inicial (/). Dessa forma, a navegação é acionada programaticamente sem a interação do usuário com um link ou botão específico.

Nós vimos apenas alguns dos hooks disponíveis no React Router, mas há muito mais a ser explorado. Para saber mais sobre os outros hooks e como eles podem ser usados em seus projetos, visite a documentação oficial no link: https://reactrouter.com/en/main

Conceitos Adicionais sobre Rotas

Agora que já temos uma noção básica dos principais hooks e componentes em rotas de aplicativos React, não podemos deixar de conhecer alguns conceitos essenciais antes de avançarmos.

Rotas Exatas

As rotas exatas são aquelas que correspondem exatamente à URL que você especificou. Por exemplo, se você tem uma rota definida como /sobre, então somente a URL /sobre corresponderá a esta rota. Se alguém acessar /sobre/mais-informacoes, ele não será direcionado para esta rota.

Para criar uma rota exata, você pode usar o método exact na sua definição de rota:

<Route exact path="/sobre" component={AboutPage} />

Rotas Simples

As rotas simples, por outro lado, são mais flexíveis e podem corresponder a qualquer URL que comece com o padrão que você especificou. Por exemplo, se você tem uma rota definida como /sobre, então tanto a URL /sobre quanto /sobre/mais-informacoes corresponderão a esta rota.

Para criar uma rota simples, você não precisa usar o método exact:

<Route path="/sobre" component={AboutPage} />

Parâmetros de Rotas

Às vezes, você pode querer que a sua rota corresponda a uma URL que inclua informações adicionais, como o ID de um usuário ou o nome de um produto. Neste caso, você pode usar parâmetros de rota.

Por exemplo, você pode criar uma rota que corresponda a URL /produto/:id, onde :id representa um parâmetro que pode ser qualquer valor:

<Route path="/produto/:id" component={ProductPage} />

Agora, se alguém acessar a URL /produto/123, ele será direcionado para a página do produto com ID 123. Você pode acessar o valor desse parâmetro na sua página de destino usando o objeto props.

Tópicos Avançados em React Router

Agora que você já possui uma compreensão básica dos componentes, hooks e conceitos do React Router, está na hora de explorar alguns tópicos avançados. Nesta seção, você aprenderá sobre proteção de rotas e como trabalhar com query strings no React Router.

A proteção de rotas é uma funcionalidade importante para garantir que somente usuários autorizados acessem certas áreas de seu aplicativo. Além disso, você também aprenderá sobre query strings, que permitem que você passe informações adicionais na URL. Finalmente, você descobrirá como lidar com query strings no React Router V6+.

Com estes conhecimentos, você estará pronto para construir aplicativos ainda mais avançados e funcionais com o React Router. Vamos começar!

Proteção de Rotas

Em algumas situações, queremos restringir o acesso a algumas páginas do aplicativo para usuários não autorizados. Para fazer isso, podemos criar rotas "privadas", por exemplo, usando o recurso "routes" do React Router versão 6 em diante para proteger suas rotas.

Para proteger uma rota, você precisa criar uma função que verifica se o usuário está autenticado e, se não estiver, redireciona-o para uma página de login. Aqui está um exemplo de código de uma função de verificação de autenticação:

const isAuthenticated = () => {
  const token = localStorage.getItem("token");
  return token !== null;
};

A função isAuthenticated verifica se o usuário está autenticado ou não. Ele faz isso verificando se existe um token armazenado no localStorage do navegador.

O localStorage é uma API de armazenamento de dados que permite armazenar dados no navegador de forma persistente, mesmo depois que a página é fechada. Nesse caso, a função está verificando se existe um item chamado "token" no localStorage.

Se o item "token" existir, significa que o usuário está autenticado e a função retorna true. Se o item "token" não existir, significa que o usuário não está autenticado e a função retorna false.

Em seguida, você pode usar essa função na sua rota para protegê-la. Aqui está um exemplo de como fazer isso:

import { navigate } from "@reach/router";

const PrivateRoute = ({ children, ...rest }) => {
  if (!isAuthenticated()) {
    navigate("/login");
    return null;
  }

  return (
    <Route {...rest}>
      {children}
    </Route>
  );
};

Este código cria um componente chamado PrivateRoute que é usado para proteger rotas na aplicação.

O componente importa a função navigate do pacote @reach/router. Essa função é usada para navegar para outra rota da aplicação.

A função PrivateRoute tem dois parâmetros: children e rest.

children representa o conteúdo da rota protegida e rest representa todos os outros parâmetros da rota, como path, exact, etc.

Dentro da função PrivateRoute, há uma verificação se o usuário está autenticado ou não, usando a função isAuthenticated. Se o usuário não estiver autenticado, a função navigate é usada para navegar para a rota "/login". Nesse caso, a função PrivateRoute retorna null, o que significa que nenhum conteúdo será renderizado na tela.

Se o usuário estiver autenticado, a função PrivateRoute retorna uma Route com todos os parâmetros da rota original (rest) e o conteúdo da rota protegida (children).

Agora, você pode usar o componente "PrivateRoute" em vez de "Route" em sua aplicação para proteger uma rota específica.

Aqui está um exemplo de como fazer isso:

import { PrivateRoute } from "./PrivateRoute";

function App() {
  return (
    <Routes>
      <PrivateRoute path="dashboard" element={<Dashboard />} />
      <Route path="login" element={<Login />} />
    </Routes>
  );
}

Este código é um exemplo de como usar o componente PrivateRoute na sua aplicação.

A função App é o componente principal da aplicação. Ela retorna um componente Routes com as rotas da aplicação.

Há duas rotas definidas: dashboard e login. A rota dashboard é protegida usando o componente PrivateRoute. Isso significa que somente usuários autenticados poderão acessar a rota dashboard. Se o usuário não estiver autenticado, será redirecionado para a rota login.

A rota login não está protegida e pode ser acessada por qualquer usuário, independentemente de seu estado de autenticação.

Em suma, proteger rotas no React Router versão 6 é fácil usando apenas o componente "route" e a função "navigate". Você pode criar um componente personalizado, como "PrivateRoute", para proteger suas rotas e garantir que apenas usuários autenticados tenham acesso a elas.

Alem dessa, existem várias outras maneiras de se criar proteção de rotas com o React Router. Caso queira saber mais, recomendo o artigo Private Route in react-router v6 de André Luca.

Query Strings

Uma query string é uma parte opcional de uma URL que contém informações adicionais para o servidor. Ela é composta por pares de chave-valor separados por caracteres especiais, como "&", ";" ou "?".

A query string é enviada para o servidor como parte da requisição HTTP. O servidor pode usar essas informações para determinar como processar a requisição e retornar uma resposta adequada. Por exemplo, a query string pode fornecer informações de pesquisa, filtros de resultados de pesquisa, preferências de usuário, entre outros.

Por exemplo, na URL "https://twitter.com/search?q=Newcastle&src=trend_click&vertical=trends", as strings "?" e "&" são usadas para separar as informações adicionais na query string da URL.

A string "?" marca o início da query string. Tudo após o "?" é considerado parte da query string.
A string "&" é usada para separar diferentes pares de chave-valor na query string. Cada par de chave-valor é separado pelo caractere "&".
"/search" é o caminho para a página específica dentro do domínio.
"q=Newcastle" é o primeiro par de chave-valor na query string. "q" é a chave que representa o termo de pesquisa e "Newcastle" é o valor desse termo.
"src=trend_click" é o segundo par de chave-valor na query string. "src" é a chave e "trend_click" é o valor.
"vertical=trends" é o terceiro par de chave-valor na query string. "vertical" é a chave e "trends" é o valor.

Em síntese, a URL completa fornece informações para o back-end sobre o que o usuário está procurando no site do Twitter, bem como informações adicionais sobre a origem da pesquisa e o contexto da pesquisa.

Lidando com Query Strings no React Router V6+

No React Router v6, você pode usar query strings em suas rotas com ajuda do módulo URLSearchParams e useSearchParams. URLSearchParams é uma classe que facilita o trabalho de trabalhar com query strings na URL, permitindo a você extrair as informações da query string de forma simples e eficiente.

Use o hook useSearchParams para acessar as informações da query string na sua aplicação. Este hook retorna um objeto com as informações da query string, onde você pode obter os valores usando a sintaxe de objeto, como searchParams.get('key1'). Além disso, você pode usar o método set() do objeto searchParams para definir ou atualizar os valores na query string.

Aqui está um exemplo de como você pode usar query strings com o hook useSearchParams:

import React, { useState } from 'react';
import { useLocation, useSearchParams, useNavigate } from 'react-router-dom';

function SearchPage() {
  // Pega a localização atual da URL
  const location = useLocation();

  // Pega os parâmetros da query string
  const searchParams = useSearchParams();

  // Busca o valor do parâmetro "q" na query string ou inicializa com uma string vazia
  const searchQuery = searchParams.get('q') || '';

  // Gerencia o estado do valor do input de busca
  const [searchInput, setSearchInput] = useState(searchQuery);

  // Pega a função navigate para navegar para outra página
  const navigate = useNavigate();

  // Manipula o envio do formulário de busca
  const handleSubmit = (event) => {
    // Previne o comportamento padrão de submit do formulário
    event.preventDefault();

    // Define o valor do parâmetro "q" na query string
    searchParams.set('q', searchInput);

    // Navega para a página atual, adicionando os parâmetros da query string
    navigate(`${location.pathname}?${searchParams.toString()}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={searchInput}
        onChange={(event) => setSearchInput(event.target.value)}
      />
      <button type="submit">Buscar</button>
    </form>
  );
}

Este código cria uma página de busca que permite ao usuário digitar uma consulta e enviá-la. Aqui estão as coisas importantes que estão acontecendo:

Usamos useLocation e useSearchParams do pacote react-router-dom para obter informações sobre a localização atual da página (incluindo a query string) e trabalhar com os parâmetros da query string.
Usamos useState para gerenciar o estado do valor do input de busca. Isso permite que o usuário digite algo na caixa de busca e que esse valor seja armazenado para que possamos usá-lo quando o usuário clicar em "Buscar".
Usamos useNavigate para obter a função navigate que nos permite navegar para outra página.
Temos uma função handleSubmit que é chamada quando o usuário envia o formulário de busca. Essa função define o valor do parâmetro "q" na query string usando searchParams.set e, em seguida, usa navigate para navegar para a página atual, adicionando os parâmetros da query string.
Finalmente, retornamos um formulário que tem um input para digitar a consulta e um botão "Buscar" que, quando clicado, chama a função handleSubmit. O estado atual do input de busca é atualizado a cada vez que o usuário digita algo na caixa, graças ao onChange no input.

Este código modifica a query string da URL atual quando o formulário é enviado. A query string é a parte da URL após o símbolo de ? e é composta por pares de chave e valor (por exemplo, chave=valor).

Quando o formulário é enviado, o evento submit é manipulado pela função handleSubmit. Nesta função, o valor do input de busca é definido como o valor do parâmetro q na query string usando o método set do objeto searchParams. Em seguida, a função navigate é usada para navegar para a página atual, adicionando a query string modificada à URL.

Por exemplo, se a URL atual for www.example.com/search, após o envio do formulário com o valor de busca react, a URL será alterada para www.example.com/search?q=react. A query string ?q=react representa a chave q com o valor react.

Existem diversas formas de manipular query strings com a biblioteca React Router. Para saber mais, acesse a documentação oficial em https://reactrouter.com/en/main.

Considerações Finais

Parabéns por chegar até aqui! Você agora tem uma compreensão sólida do React Router e como ele pode ser usado para gerenciar rotas em seu aplicativo React. Desde a instalação até os conceitos avançados, você aprendeu como usar os componentes e hooks básicos do React Router, trabalhar com parâmetros de rotas, proteger suas rotas e lidar com query strings.

Com este conhecimento, você pode construir aplicativos React mais avançados e ricos em funcionalidades. Continue aprendendo e experimentando com o React Router para se tornar um profissional ainda mais capacitado.

Em conclusão, o React Router é uma ferramenta poderosa para gerenciar as rotas em seu aplicativo React. Seguindo este guia, você agora tem a base necessária para criar aplicativos com uma navegação clara e fácil de usar.

⚛Os 10 React Hooks Mais Úteis: 07 - useMemo⚛

Marcelo Petry — Thu, 05 Jan 2023 15:45:02 +0000

Este é o sétimo artigo de uma série de 10, que explica de forma simplificada e com exemplos, os react hooks mais utilizados em programação.

O React hook useMemo é útil para otimizar o desempenho de um componente armazenando o resultado de funções intensivas em recursos de maneira a evitar o recálculo desnecessário em atualizações futuras do componente.

Por exemplo, se você tiver uma função que percorre toda uma grande lista de itens e filtra essa lista com base em alguns critérios, essa função pode ser considerada um cálculo intensivo, pois ela pode levar um tempo considerável para ser executada, dependendo do tamanho da lista.

O useMemo permite que você armazene o resultado de uma expressão e evite que ela seja recalculada se os valores nessa expressão não mudarem.

A sintaxe do useMemo é a seguinte:

Nessa estrutura, valorMemorizado é o valor retornado pelo useMemo, que é o resultado da expressão passada como primeiro argumento (expressãoACalcular).

O segundo argumento é um array de dependências ([dependência1, dependência2]) que indica quais valores são utilizados pela expressão para ser calculada. Se algum desses valores mudar, o useMemo chamará a expressão novamente e armazenará o novo resultado. Se nenhum desses valores mudar, o useMemo retornará o valor armazenado anteriormente, evitando assim o cálculo desnecessário.

Quando deve-se utilizá-lo?

Antes de tudo, é importante lembrar que o código não deve depender de useMemo. Em outras palavras, você deve ser capaz de substituir chamadas a useMemo por chamadas de função diretas e não alterar o comportamento da aplicação, exceto o desempenho. A forma mais fácil de fazer isso é escrever o código sem useMemo primeiro e adicioná-lo conforme necessário.

UseMemo() na Prática

No nosso primeiro exemplo, usamos o hook useMemo() para otimizar o desempenho da aplicação (to do list):
(Acompanhe em "Show files>src>App.jsx")

Aqui, o useMemo permite que você faça uma memorização de um valor computado e apenas recalcule esse valor se alguma das suas dependências mudar.

No código específico desse to do list, o useMemo está sendo usado para criar uma lista filtrada de tarefas (filteredTasks) a partir da lista de tarefas (tasks). A lista filtrada é criada usando um filtro (showCompleted) que determina se as tarefas concluídas devem ser incluídas na lista ou não.

O useMemo é chamado com uma função de callback e um array de dependências. A função de callback é executada somente se alguma das dependências mudar. Nesse caso, as dependências são showCompleted e tasks. Isso significa que a lista filtrada só será recalculada se o filtro ou a lista de tarefas mudar, o que pode otimizar o desempenho da aplicação, especialmente em casos em que a criação da lista filtrada é um processo custoso em termos de tempo ou recursos. Isso é especialmente importante em aplicações que precisam lidar com grandes quantidades de dados ou que são usadas em dispositivos com menor poder de processamento.

Hook useMemo em consulta de API

Outro exemplo comum de uso do useMemo é em conjunto com o useEffect para evitar que uma função seja recriada a cada renderização. Digamos que você tenha um componente que faz uma chamada ajax para buscar dados de uma API e exibe os dados em uma tabela. Você pode usar o useMemo para armazenar a função de busca em cache e evitar que ela seja recriada toda vez que o componente é renderizado. Acompanhe:
(Acompanhe em "Show files>src>App.jsx")

O código acima representa um componente do React que permite ao usuário pesquisar por filmes e exibir os resultados da pesquisa em uma tabela.

Neste exemplo, o hook useMemo é utilizado para otimizar a performance da aplicação.

1 - Primeiro, o código importa o arquivo App.css e os Hooks useState, useMemo e useEffect do React;

2 - Em seguida, o código define a função App, que é um componente do React;

3 - Dentro da função App, o código usa o useState três vezes para inicializar três estados: searchTerm, movies e trendingMovies;

4 - O código então define a função fetchMovies para buscar filmes da API do The Movie Database (TMDb) usando o termo de pesquisa atual. A função fetchTrendingMovies é definida de maneira semelhante, mas busca os filmes mais populares da semana;

5 - O código usa o useEffect para garantir que a função fetchMovies ou fetchTrendingMovies seja chamada quando o termo de pesquisa ou o componente for atualizado. Se o termo de pesquisa estiver vazio, a função fetchTrendingMovies é chamada, caso contrário, a função fetchMovies é chamada;

6 - O código usa o useMemo para filtrar o array de filmes baseado no termo de pesquisa atual. Isso é feito para evitar que o array seja filtrado toda vez que o componente é renderizado. A função fetchData é criada apenas uma vez e armazenada na memória pelo useMemo. Isso significa que, ao invés de criar uma nova função toda vez que o componente é renderizado, a mesma função é reutilizada, o que pode melhorar significativamente o desempenho da aplicação em casos em que a função é chamada com frequência;

7 - Por fim, o código retorna um elemento JSX que renderiza uma tabela de filmes. Se o termo de pesquisa estiver vazio, a tabela exibe os filmes mais populares da semana. Caso contrário, a tabela exibe os filmes filtrados pelo termo de pesquisa.

UseMemo em formulário de Login

O React hook useMemo pode ser útil em um componente de formulário de login, no qual seja preciso melhoras de performance. Veja o exemplo:
(Acompanhe em "Show files>src>App.jsx")

O código acima é um formulário de login que permite que o usuário insira um nome de usuário e senha e, em seguida, envie os dados para a função onSubmit.

O formulário usa os hooks useState do React para gerenciar o estado dos campos de entrada de nome de usuário e senha e de uma mensagem de erro que pode ser exibida.

O hook useMemo é usado para criar uma memória cache da variável isFormValid. Essa variável é um booleano que indica se os campos de nome de usuário e senha estão preenchidos.

A função de callback passada para o useMemo retorna true se o tamanho de username for maior que zero e o tamanho de password for maior que zero. Caso contrário, ela retorna false. O useMemo aceita um segundo argumento, que é uma lista de dependências.

Isso significa que a função de callback só será chamada novamente se algum dos valores dessa lista mudar. No caso do código acima, a função de callback só será chamada novamente se o valor de username ou password mudar.

Isso é útil porque a função de callback pode ser intensiva em termos de processamento e não precisamos recalculá-la toda vez que o componente é renderizado. Ao invés disso, podemos usar a memória cache fornecida pelo useMemo para evitar recálculos desnecessários e melhorar a performance do componente.

A função handleSubmit é chamada quando o formulário é enviado e impede o envio padrão do formulário. Se o formulário for válido (ou seja, se os campos de nome de usuário e senha estiverem preenchidos), a função onSubmit é chamada com os valores de username e password. Caso contrário, uma mensagem de erro é exibida.

O código também renderiza dois botões: um para enviar o formulário e outro para entrar com o Google. O primeiro botão é desabilitado se o formulário não for válido. O segundo botão inclui um ícone de login do Google.

Conclusão

O hook useMemo do React permite que você crie uma memória cache de valores computados em um componente. Isso pode ser útil para evitar recalculos desnecessários e melhorar a performance do seu projeto React.

O useMemo é recomendado para uso em casos em que a computação de um valor pode ser intensiva em termos de processamento e não precisa ser recalculada toda vez que o componente é renderizado. Em vez disso, o valor pode ser armazenado em cache e somente recalculado quando alguma de suas dependências mudar.

No geral, o uso do useMemo pode ajudar a otimizar a performance de uma aplicação React, especialmente em componentes que são renderizados frequentemente ou que realizam cálculos complexos.

No entanto, é importante lembrar de usá-lo com moderação, pois criar muitas memórias cache pode resultar em um aumento no uso de memória e pode comprometer a performance em vez de melhorá-la.

marcelopetry.com

JS map(), filter() e reduce() em React

Marcelo Petry — Wed, 04 Jan 2023 00:59:13 +0000

Map, Filter e Reduce são funções de alta ordem que são amplamente utilizadas em aplicações JavaScript, incluindo aplicações React.

Map é usado para iterar sobre um array e transformar cada elemento do array em alguma outra coisa.

Filter é usado para iterar sobre um array e remover elementos que não atendem a um determinado critério.

Reduce é usado para iterar sobre um array e reduzi-lo a um único valor, com base em uma função de acumulação fornecida.

Essas funções são muito úteis quando se deseja realizar transformações ou operações em conjuntos de dados, pois permitem fazer isso de maneira concisa e legível. Elas também são muito populares no React devido ao seu uso em conjunto com o paradigma de programação funcional, que é amplamente utilizado no React.

No React, essas funções são usadas principalmente para se trabalhar com componentes baseados em dados, já que é comum precisar exibir ou manipular dados provenientes de fontes externas em aplicações web.

Map()

Map é uma função de alta ordem que itera sobre um array e aplica uma função de transformação a cada elemento do array. Ela retorna um novo array com os elementos transformados.

A sintaxe da função map é a seguinte:

No React, a função map é muito utilizada para renderizar elementos de lista. Por exemplo, digamos que você tenha um array com uma lista de nomes e deseja exibi-los em um componente de lista. Você pode usar a função map para iterar sobre esse array e retornar um array de elementos JSX para cada nome:
(Acompanhe em "Show files>src>App.jsx")

Neste exemplo, a função map itera sobre o array de posts e retorna um elemento <li> para cada nome. Cada elemento é preenchido com o nome e é dado uma key única com base no próprio nome.

Outra forma muito empregada de map em React é na iteração sobre um array de objetos. No exemplo abaixo, a função map é usada em um componente React para renderizar uma lista de produtos com seus nomes e preços:
(Acompanhe em "Show files>src>App.jsx")

1 - A função App é um componente React que renderiza uma lista de produtos;

2 - Dentro da função App, uma constante chamada products é declarada com um array de objetos, cada um representando um produto com um ID, nome, preço e emoji;

3 - A função App retorna um elemento <ul> que contém uma lista de elementos <li>;

4 - A função map() é usada para percorrer cada item no array products e retornar um elemento <li> para cada um; O argumento da função map() é uma função anônima que recebe um parâmetro product e retorna o elemento <li> para esse produto;

5 - O elemento <li> retornado pelo map() inclui um elemento <div> com a classe "card" que contém informações sobre o produto, incluindo o emoji, o nome e o preço;

6 - O atributo key é usado para identificar de forma única cada elemento <li> e é importante para otimizar o desempenho do React;

7 - O atributo style é usado para remover o marcador padrão dos elementos <li> e substituí-lo por um estilo list-style-type: none;

8 - A função App é exportada para ser usada em outro arquivo.

É importante notar que cada elemento gerado pelo map deve ter uma propriedade key única, pois isso é necessário para o React realizar otimizações de performance em sua renderização.

Filter()

Filter() é uma função de array que permite filtrar elementos de um array baseado em um determinado critério. No contexto do React, você pode usar a função filter() para filtrar elementos de um array de dados antes de renderizá-los em uma lista.

A sintaxe da função filter() é a seguinte:

O primeiro argumento da função filter() é uma função de callback que é chamada para cada elemento do array. Essa função de callback deve retornar true se o elemento atual deve ser incluído no novo array ou false se o elemento atual deve ser ignorado.

O segundo argumento opcional da função filter() é o valor de this a ser usado dentro da função de callback.

Veja na prática com um simples exemplo abaixo, no qual utilizamos a função filter() para retornar somente as pessoas maiores de idade em uma lista:
(Acompanhe em "Show files>src>App.jsx")

O código mostra uma lista de pessoas, com seus respectivos nomes e idades. A função filter() é utilizada para selecionar apenas as pessoas que são maiores de 18 anos. Isso é feito através da verificação da idade de cada pessoa, e aquelas que possuem idade maior ou igual a 18 são adicionadas em um novo array, que é chamado de "maiores".

Em seguida, a função map() é usada para renderizar cada pessoa selecionada pelo filter(). Cada pessoa é mostrada em um elemento <li> dentro de uma lista <ul>, e cada <li> possui um elemento <div> com a classe card. Dentro do <div>, há um título com o nome da pessoa e um parágrafo com sua idade.

Abaixo, usamos o mesmo exemplo da lista de produtos em map(), porém, para filtrar somente os produtos com preço maior ou igual ao definido pelo usuário com no input:
(Acompanhe em "Show files>src>App.jsx")

1 - O componente App importa o módulo useState do React, que permite gerenciar o estado de um componente;

2 - A constante valor e a função setValor são criadas pelo useState, que inicialmente possui o valor "";

3 - A constante products é criada com um array de objetos que representam produtos. Cada produto possui um id, nome, preço e emoji;

4 - A constante expensiveProducts é criada pelo método filter(), que recebe como parâmetro uma função anônima que possui um argumento product. Esse argumento representa cada produto do array products e a função verifica se o preço desse produto é maior ou igual ao valor atual de valor. Os produtos que passam nessa verificação são adicionados em expensiveProducts;

5 - O componente App possui um input que é vinculado ao estado valor através do atributo value e da função onChange. Quando o usuário digita algo no input, o estado valor é atualizado com o novo valor digitado;

6 - A lista ul é renderizada com a função map(), que recebe como parâmetro uma função anônima que possui um argumento product. Esse argumento representa cada produto de expensiveProducts e a função retorna um elemento li com uma div card que possui o emoji, nome e preço do produto;

7 - O componente App é exportado para ser utilizado em outro lugar da aplicação.

Reduce()

O método reduce() é uma função de alta ordem que recebe um acumulador e um valor atual como argumentos e retorna um único valor. É aplicado ao React para agregar todos os elementos de um array em um único elemento.

Aqui está a sintaxe básica da função reduce:

O valor inicial é opcional e é o valor inicial do acumulador. Se não for fornecido, o primeiro elemento do array será usado como valor inicial.

Para entender melhor o funcionamento dessa função, veja o exemplo abaixo:
(Acompanhe em "Show files>src>App.jsx")

No código acima, a função App() é um componente React que retorna um elemento <> que contém dois elementos <p>. O primeiro elemento <p> exibe uma string estática e o segundo elemento <p> exibe o resultado da soma dos elementos de um array de números inteiros.

O array de números é declarado como uma constante chamada numbers e é inicializada com os valores 1, 2, 3, 4 e 5. A soma dos elementos do array é calculada usando a função reduce() e armazenada na constante sum.

A função reduce() é chamada no array numbers e recebe como argumento uma função de acumulação que soma o acumulador atual (accumulator) com o valor atual da iteração (currentValue). O valor inicial do acumulador é 0.

A função reduce() itera sobre todos os elementos do array numbers e retorna o valor total, que é armazenado na constante sum.

Por fim, o componente App é exportado para ser usado em outros locais do projeto. Quando o componente é renderizado, os elementos <p> são exibidos na tela, exibindo a string estática e o resultado da soma dos elementos do array.

Vamos avançar um pouco mais?
No próximo exemplo, utilizamos a função reduce() com React hooks para calcular o preço total dos itens em um carrinho de compras:
(Acompanhe em "Show files>src>App.jsx")

O código acima é uma implementação de um carrinho de compras em React.
Ele permite que o usuário adicione ou remova itens do carrinho e exibe o valor total do carrinho.
Ele começa importando alguns módulos e criando uma função App, que é o componente principal. Dentro da função App, são declaradas duas variáveis de estado: cart e total. cart é um array de objetos que representam itens adicionados ao carrinho de compras e total é um número que representa o valor total do carrinho.
O hook useEffect é então usado para definir um efeito que será executado sempre que o valor de cart for atualizado. O efeito consiste em chamar a função reduce() em cart para calcular o valor total do carrinho. O valor total é então atualizado usando a função setTotal.

O código percorre cada item do carrinho (representado por currentValue) e acumula o valor total (representado por accumulator) usando a fórmula accumulator + currentValue.price * currentValue.quantity. Isso significa que o valor total é a soma dos preços dos itens multiplicados pela quantidade de cada item.
A função reduce() é chamada com dois argumentos:

Uma função reducer que especifica como o valor acumulado deve ser atualizado com o valor atual;
Um valor inicial para o acumulador. No código acima, o valor inicial é 0. Quando a função reduce() é chamada, ela retorna o valor final acumulado após todos os elementos do array terem sido processados. Esse valor é então atribuído à variável newTotal.

O componente também define duas funções: handleAddToCart e handleRemoveFromCart. A função handleAddToCart é chamada quando o usuário clica em um dos botões "Adicionar" e adiciona o item correspondente ao carrinho de compras. Se o item já existir no carrinho, sua quantidade é atualizada. Caso contrário, um novo item é adicionado ao carrinho. A função handleRemoveFromCart é chamada quando o usuário clica no botão "Remover" e remove o item correspondente do carrinho.
Por fim, o componente renderiza uma lista de itens no carrinho, exibindo cada item com seu nome, preço e quantidade. Também é exibido o valor total do carrinho e os botões "Adicionar" para cada tipo de item.

Obrigado se você acompanhou até aqui! Espero que isso tenha ajudado a esclarecer a função reduce e o seu uso.

marcelopetry.com

⚛Os 10 React Hooks Mais Úteis: 06 - useCallback⚛

Marcelo Petry — Sun, 01 Jan 2023 23:04:59 +0000

Este é o sexto artigo de uma série de 10, que explica de forma simplificada e com exemplos, os react hooks mais utilizados em programação.

O useCallback é um hook do React que retorna uma função memorizada. Isso significa que a função só é recriada quando uma de suas dependências mudar.

Caso contrário, a mesma instância de função é retornada em todas as chamadas.

O useCallback é útil quando você tem um componente que precisa passar uma função para um componente filho ou para uma função de gancho, mas quer evitar que a função seja recriada toda vez que o componente pai é renderizado. Isso pode ajudar a evitar o ciclo de atualização de componentes indesejado e aumentar a performance de sua aplicação.

Como usar o useCallback

Aqui está um exemplo da funcionalidade do useCallback:
(Acompanhe em "Show files>src>App.jsx")

O código acima é de uma função chamada App que usa o hook useState para gerenciar o estado de uma variável chamada count. Ele também cria duas funções memorizadas usando o hook useCallback: increment e reset.

A função increment é criada usando o useCallback com uma lista de dependências contendo apenas a variável count. Isso significa que a função só será recriada quando o valor de count mudar. A função increment é usada como um manipulador de cliques para um botão e, quando clicada, incrementa o valor de count em 1.

A função reset é criada de maneira semelhante, usando o useCallback com uma lista de dependências contendo apenas a variável count. Isso significa que a função só será recriada quando o valor de count mudar. A função reset é usada como um manipulador de cliques para outro botão e, quando clicada, define o valor de count como 0.

O objetivo do useCallback é garantir que as funções increment e reset sejam criadas apenas quando necessário, evitando que elas sejam recriadas toda vez que o componente é renderizado. Isso pode ajudar a evitar o ciclo de atualização de componentes indesejado e aumentar a performance de sua aplicação.

Filtro de lista com useCallback em React

Um uso comum do useCallback é no caso em que você tem uma lista e pretende realizar uma busca instantânea nos items dessa lista.

O exemplo abaixo demonstra como implementar um filtro de lista de Pokémons através desse hook:
(Acompanhe em "Show files>src>App.jsx")

1 - A primeira chamada a useState inicializa a variável de estado users com uma lista de objetos de Pokémon e retorna essa lista e a função setUsers.

2 - useState é chamado novamente para inicializar a variável de estado filter com uma string vazia e retornar essa string e a função setFilter.

3 - A função handleFilterChange é criada usando useCallback e só será recriada se o valor de filter mudar. A função handleFilterChange é chamada como um manipulador de evento onChange de entrada e atualiza o valor de filter com o valor da entrada.

4 - useCallback é chamado novamente para criar a função filteredUsers, que filtra a lista de pokémons (users) com base no valor de filter. A função filteredUsers só será recriada se o valor de users ou filter mudar.

5 - O componente App renderiza uma entrada de pesquisa, um botão de reset de filtro e o componente filho ChildComponent. O valor atual de filter é passado como o valor da entrada de pesquisa e a função handleFilterChange é passada como o manipulador de evento onChange. O componente filho é passado a função filteredUsers como uma propriedade, que é usada para renderizar uma lista de cards de Pokémon filtrados.

6 - O componente filho ChildComponent renderiza uma lista de cards de Pokémon usando a propriedade users, que é uma função de callback passada pelo componente pai. Cada card é composto por uma foto do Pokemon correspondente e seu nome. A foto é exibida através de uma tag img e a URL da imagem é obtida da propriedade image do objeto Pokémon. O nome do Pokémon é exibido através de uma tag p. Cada card é exibido em uma lista através de uma tag li. Quando o usuário digita algum valor no input de busca, a função handleFilterChange é chamada para atualizar o valor do filtro. A função filteredUsers, que é criada com o useCallback, é usada para filtrar a lista de Pokémons com base no valor atual do filtro.

7 - A lista de Pokémons filtrados é passada como propriedade para o componente filho ChildComponent e é exibida através de uma lista. Ao clicar no botão "Reset filter", o filtro é resetado para vazio, exibindo novamente todos os Pokémons.

Hook useCallback para evitar a recriação de funções em componentes React

O hook useCallback do React permite que uma função seja retornada de forma imutável, evitando sua recriação a cada renderização do componente pai. Isso pode ser útil em situações em que uma função é passada como propriedade para um componente filho e pode melhorar a performance da aplicação.

Abaixo, temos um exemplo de código que evita a recriação de funções, o qual continua no caso anterior (lista com pokémons):
(Acompanhe em "Show files>src>App.jsx")

1 - import "./App.css" importa o arquivo de estilo App.css para o componente App.

2 - import { useState, useCallback } from "react" importa os hooks useState e useCallback do pacote react.

3 - function App() define o componente App.

4 - const [selectedType, setSelectedType] = useState(null) define o estado selectedType como null e uma função setSelectedType para atualizar o estado.

5 - const [pokemons, setPokemons] = useState([{ id: 1, name: "Abra", type: "psychic" }, { id: 2, name: "Bellsprout", type: "grass" }, { id: 3, name: "Chansey", type: "normal" }]) define o estado pokemons como um array de objetos e uma função setPokemons para atualizar o estado.

6 - const handleSelectType = useCallback((type) => { setSelectedType(type) }, [selectedType]) cria uma função de callback chamada handleSelectType usando useCallback. A função atualiza o estado selectedType com o argumento type passado para ela. O segundo argumento para useCallback é um array de dependências, no caso apenas o valor de selectedType. Isso significa que, se o valor de selectedType não mudar, a mesma instância de handleSelectType será retornada e pode ser reutilizada sem que o componente seja renderizado novamente.

7 - return (...) retorna JSX que renderiza uma lista de Pokemon e um componente DetailsComponent, se selectedType tiver um valor.

8 - function DetailsComponent({ selectedType }) define o componente DetailsComponent que recebe selectedType como um prop.

9 - return <div className="type"> Pokemon do tipo: {selectedType} retorna JSX que renderiza o texto "Pokemon do tipo: [selectedType]".

10 - export default App exporta o componente App para ser usado em outros arquivos.

Em resumo, o useCallback no código acima é usado para criar uma função de callback chamada handleSelectType que é passada como um prop para um componente filho.

Quando os argumentos passados para useCallback (no caso, apenas o valor de selectedType) não mudam, a mesma instância de handleSelectType é retornada e pode ser reutilizada pelo componente filho sem que ele seja renderizado novamente. Isso pode ser útil para evitar que um componente filho seja renderizado desnecessariamente, pois a função de callback não mudou.

Conclusão

O hook useCallback do React é uma ferramenta útil para evitar a recriação de funções a cada renderização de um componente, o que garante uma melhor performance à aplicação.

Além disso, ao retornar uma função imutável, o useCallback garante que a função passada como propriedade para um componente filho não mude a cada renderização do componente pai, o que pode ser apropriado em casos em que seja importante garantir a consistência do comportamento da função.

Em suma, o hook useCallback é uma ferramenta valiosa para garantir a eficiência e otimização de aplicações React.

⚛ React Lifecycle 🔃

Marcelo Petry — Fri, 30 Dec 2022 00:46:28 +0000

O conhecimento sobre o ciclo de vida (ou lifecycle) de um componente React é frequentemente solicitado em entrevistas de emprego para desenvolvedores, pois é um conceito fundamental para entender como o React funciona e como otimizar o desempenho de um aplicativo.

Os métodos do ciclo de vida permitem que você execute código em momentos específicos durante o processo de renderização de um componente, como antes de ele ser montado, atualizado ou desmontado. Isso é importante para garantir que o componente se comporte da forma esperada e para evitar atualizações desnecessárias, o que pode ajudar a melhorar o desempenho do aplicativo.

Além disso, os métodos do ciclo de vida também permitem que você interaja com outros sistemas, como o DOM ou APIs externas, de forma mais eficiente, pois você pode controlar quando essas interações acontecem.

Interaja com esse diagrama aqui

Abaixo veremos os três estágios do ciclo de vida de um componente em React: (1)montagem, (2)atualização e (3)desmontagem.

1. Montagem

O estágio de montagem é a primeira fase do ciclo de vida de um componente em React. Ele começa quando o componente é criado e termina quando o componente é inserido na árvore de componentes.

Durante o estágio de montagem, o componente passa pelos seguintes métodos do ciclo de vida:

1.1 constructor( )

O método constructor é um método especial em uma classe em JavaScript que é chamado quando uma nova instância da classe é criada. No React, o método constructor é chamado quando um componente é criado.

A sintaxe do método constructor é a seguinte:

O método constructor recebe um parâmetro props, que é um objeto que contém as propriedades enviadas para o componente.

O método constructor é utilizado para inicializar o estado do componente e para vincular métodos de instância ao próprio componente. Por exemplo, você pode utilizar o método constructor para definir o estado inicial de um componente ou para vincular um método de instância ao evento onClick de um botão.

Aqui está um exemplo de como o método constructor pode ser utilizado em um componente React (Files>src>App.jsx):

Neste exemplo, o método constructor é utilizado para inicializar o estado count com o valor 0 e para vincular o método handleClick ao evento onClick do botão. Quando o botão é clicado, o método handleClick é
chamado e atualiza o estado do componente, fazendo com que o componente seja renderizado novamente com o novo valor do estado count.

1.2 render( )

O método render() é o único método obrigatório em um class-component. (reactjs.org)

O método render é um dos métodos mais importantes do ciclo de vida de um componente em React, pois é nele que o componente é renderizado na tela. Quando o método render é chamado, o componente gera o HTML que será exibido para o usuário e o envia para o DOM para ser renderizado.

A sintaxe do método render é a seguinte:

O método render deve sempre retornar um único elemento React, que pode ser um elemento HTML ou outro componente.
Aqui está um exemplo de um componente em React que utiliza o método render para gerar o HTML que será renderizado:
(Acompanhe em "Show files>src>App.jsx")

Neste exemplo, o componente MyComponent tem um estado chamado name, que é inicializado com o valor "John" no método constructor. O método render é então chamado para gerar o HTML que será renderizado pelo componente. No caso, o método render retorna um elemento div que contém um título e um parágrafo, ambos utilizando o valor do estado name para exibir o nome do usuário.

Quando o componente é renderizado, o HTML gerado pelo método render será exibido para o usuário, como mostrado abaixo:

1.3 componentDidMount( )

O método componentDidMount() é um método do ciclo de vida de um componente em React que é chamado imediatamente após um componente ser montado (inserido na árvore de componentes). Ele é chamado apenas uma vez na vida de um componente e é a primeira oportunidade que o componente tem de interagir com o DOM e outros sistemas.

A sintaxe do método componentDidMount é a seguinte:

O método componentDidMount é chamado imediatamente após o método render do componente.

Ele é útil para realizar operações que precisam ser executadas após o componente ser renderizado, como fazer solicitações HTTP, configurar eventos de DOM ou iniciar animações.

Por exemplo, você pode utilizar o método componentDidMount para fazer uma solicitação HTTP para obter os dados de um servidor e atualizar o estado do componente com os dados retornados.

Aqui está um exemplo de como esse método pode ser utilizado em um componente React:
(Acompanhe em "Show files>src>App.jsx")

No código acima, o componente MyComponent é criado usando a classe React.Component do React. Ele possui um construtor que inicializa o estado inicial do componente com um objeto vazio chamado data.

O método componentDidMount é chamado imediatamente após o método render do componente. Isso significa que, quando o método componentDidMount é chamado, o componente já foi renderizado e inserido na árvore de componentes.

No método componentDidMount, uma solicitação HTTP é feita para a API da CoinGecko para obter os dados do Bitcoin. Quando a resposta é recebida, o método then é chamado com a resposta e o método json é usado para converter a resposta em um objeto JavaScript. Em seguida, o método
setState é chamado para atualizar o estado do componente com os dados retornados pela API.

O método render é chamado para renderizar o componente com o preço atual do Bitcoin em dólares. Se o estado data do componente tiver um valor, o preço atual do Bitcoin é exibido. Se o estado data for nulo, a mensagem
"Loading..." é exibida.

2. Atualização

O estágio de atualização do ciclo de vida de um componente em React ocorre quando o componente é atualizado com novas propriedades ou estado.

Durante o estágio de atualização, o componente passa pelos seguintes métodos do ciclo de vida:

2.1 render( )

O mesmo método render do estágio de montagem é chamado quando o componente é atualizado com novas propriedades ou estado.

Aqui está um exemplo de um componente em React que usa o esse método para refletir as alterações na interface do usuário:
(Acompanhe em "Show files>src>App.jsx")

Neste exemplo, o componente MyComponent tem um estado chamado age, que é inicializado com a propriedade initialAge passada como propriedade para o componente. Ele também tem um método handleAgeClick, que é chamado quando o usuário clica no botão "Adicionar ano". Quando o método é chamado, ele atualiza o estado age do componente com o valor atual da idade mais um.

O método componentDidUpdate é chamado sempre que o componente é atualizado, o que ocorre quando o componente é renderizado pela primeira vez ou quando ocorre uma mudança nas propriedades ou estado do componente. Neste caso, o método é usado para imprimir uma mensagem no console quando a propriedade name ou o estado age do componente são alterados.

Por fim, o método render é chamado para renderizar o componente com as novas propriedades ou estado. Ele retorna um elemento div que exibe o nome e a idade do componente, bem como um botão que, quando clicado, aumenta a idade do componente em um ano.

2.2 componentDidUpdate( )

O método componentDidUpdate é um método do ciclo de vida de um componente em React que é chamado imediatamente após o método render quando o componente é atualizado, ou seja, quando há uma mudança nas propriedades ou estado do componente.

Esse método é útil para realizar operações que precisam ser executadas após o componente ser atualizado, como fazer solicitações HTTP, atualizar o DOM de forma eficiente, etc.

Esse método é chamado com dois parâmetros: os valores das propriedades e estado do componente antes da atualização (prevProps e prevState) e o objeto snapshot, que é um valor opcional que pode ser passado pelo método getSnapshotBeforeUpdate.

Aqui está um exemplo de um componente em React que usa o método componentDidUpdate para atualizar o gráfico de um dashboard quando os dados são alterados:
(Acompanhe em "Show files>src>App.jsx")

No código acima, o método componentDidUpdate é chamado sempre que o componente é atualizado.

Ao método componentDidUpdate são passados dois parâmetros: prevProps e prevState, que são as propriedades e o estado do componente imediatamente antes da atualização. Isso permite que o componente compare as propriedades e o estado atuais com os valores anteriores e, se necessário, execute alguma ação.

No caso do código acima, o método componentDidUpdate é utilizado para verificar se a propriedade data do componente foi alterada. Se a propriedade data for diferente da propriedade data do componente anterior (prevProps.data !== this.props.data), o método updateChart é chamado.

Em suma, o método componentDidUpdate é usado no código acima para detectar alterações nas propriedades do componente e, quando isso ocorre, chamar o método updateChart para atualizar o gráfico com os novos dados.

3. Desmontagem: componentWillUnmount( )

O estágio de desmontagem é o último estágio do ciclo de vida de um componente em React. Ele ocorre quando o componente é removido da árvore de componentes.

Atualmente, o React tem apenas um método interno que é chamado quando um componente é desmontado: componentWillUnmount

O método componentWillUnmount é chamado imediatamente antes de um componente ser desmontado e destruído. Ele é usado para limpar qualquer lógica ou recursos que o componente possa ter usado durante o seu ciclo de vida. Alguns exemplos comuns de uso do componentWillUnmount incluem:

Desinscrever-se de eventos de mouse ou teclado;
Cancelar solicitações HTTP pendentes;
Remover elementos de DOM criados durante o ciclo de vida do componente;
Limpar temporizadores ou intervalos de tempo criados pelo componente.

Abaixo, temos um caso comum de uso do componentWillUnmount para cancelar event listeners ou outras operações assíncronas que foram iniciadas no componentDidMount:
(Acompanhe em "Show files>src>App.jsx")

No exemplo acima, o método componentWillUnmount é usado para cancelar um intervalo de tempo criado pelo método setInterval. Quando o componente é desmontado, o intervalo é cancelado, evitando que ele continue a ser executado e consumindo recursos desnecessariamente.

É importante lembrar de que o método componentWillUnmount é chamado apenas uma vez, imediatamente antes do componente ser destruído, portanto não é possível atualizar o estado do componente neste método. Além disso, não é possível usar o setState neste método, pois o componente já está prestes a ser destruído e não será renderizado novamente.

marcelopetry.com

⚛Os 10 React Hooks Mais Úteis: 05 - useReducer⚛

Marcelo Petry — Wed, 28 Dec 2022 20:41:27 +0000

Este é o quinto artigo de uma série de 10, que explica de forma simplificada e com exemplos, os react hooks mais utilizados em programação.

O useReducer é um hook do React que permite gerenciar o estado de um componente de forma semelhante ao reducer do Redux.

O useReducer é útil quando você precisa gerenciar um estado mais complexo ou compartilhado por vários componentes em sua aplicação. Ele também pode ser uma alternativa mais eficiente ao useState em casos em que o estado depende de valores anteriores, pois o useReducer só requer que você forneça o próximo estado, em vez de todo o estado atual.

O primeiro parâmetro do useReducer é o reducer, que é uma função que recebe o estado atual e uma ação como entrada e retorna o próximo estado. O reducer é responsável por atualizar o estado de acordo com a ação fornecida. Ele é geralmente escrito como um switch statement que verifica o tipo da ação e retorna o próximo estado de acordo com a ação correspondente.

O segundo parâmetro do useReducer é o estado inicial, que é o valor inicial do estado do componente. Ele é passado como o primeiro argumento para o reducer quando o componente é montado pela primeira vez. Ao chamar o useReducer, o hook retorna um par de valores: o estado atual e a função de dispatch. O estado atual é o valor atual do estado do componente, que é atualizado pelo reducer sempre que uma ação é despachada. A função de dispatch é usada para despachar uma ação para o reducer, o que atualiza o estado do componente.

Empregos do useReducer

Entenda o funcionamento do react hook useReducer com os exemplos abaixo.

1. Contador com useReducer

Acompanhe abaixo no arquivo Files>src>App.jsx o exemplo de um contador simples sobre o uso desse hook:

1 - import { useReducer } from "react": este comando importa o hook useReducer do módulo react.
2 - function reducer(state, action): esta é uma função chamada reducer, que recebe dois argumentos: state e action.
3 - switch (action.type): neste trecho, o valor do atributo type da ação é usado para escolher qual ação será realizada.
4 - case "increment": se o valor do atributo type da ação for "increment", será executado o código abaixo deste case.
5 - return { count: state.count + 1 }: este comando retorna um novo objeto com o valor de count incrementado em 1 em relação ao valor atual.
6 - case "decrement": se o valor do atributo type da ação for "decrement", será executado o código abaixo deste case.
7 - return { count: state.count - 1 }: este comando retorna um novo objeto com o valor de count decrementado em 1 em relação ao valor atual.
8 - default: se o valor do atributo type da ação não for reconhecido pelos cases acima, será executado o código abaixo deste default.
9 - throw new Error(): este comando lança uma exceção, interrompendo a execução do código.
10 - function Counter(): esta é uma função que retorna um componente do React.
11 - const [state, dispatch] = useReducer(reducer, { count: 0 }): este comando usa o hook useReducer para gerenciar o estado do componente. O primeiro argumento é o reducer definido anteriormente, e o segundo é o estado inicial, um objeto com o valor de count igual a 0. O useReducer retorna um array com dois elementos: o primeiro é o estado atual, e o segundo é uma função chamada dispatch, que permite disparar uma ação para o reducer.
12 - dispatch({ type: "increment" })}>+: este é um botão que, quando clicado, dispara uma ação de tipo "increment" para o reducer usando a função dispatch.
13 - dispatch({ type: "decrement" })}>-: este é um botão que, quando clicado, dispara uma ação de tipo "decrement" para o reducer usando a função dispatch.

2. Hook useReducer aplicado à lista de tarefas

No exemplo abaixo, o componente Files>src>App.jsx exibe uma lista de tarefas, um formulário para adicionar novas tarefas e botões para marcar tarefas como concluídas ou removê-las. Acompanhe:

1 - React e useReducer são importados do pacote react.
2 - initialState é uma constante que armazena um array vazio, que será o estado inicial do componente.
3 - reducer é uma função que recebe o estado atual e uma ação como argumentos e retorna um novo estado. Ela possui um switch case com três casos possíveis, correspondentes às ações "ADD_TASK", "TOGGLE_TASK" e "REMOVE_TASK".
4 - TaskList é uma função que retorna um componente React. Ela utiliza o hook useReducer para gerenciar o estado do componente, passando como primeiro argumento a função reducer e como segundo argumento o estado inicial, armazenado na constante initialState.
5 - handleSubmit é uma função que é chamada quando o formulário é submetido. Ela previne o comportamento padrão de recarregar a página e envia uma ação do tipo "ADD_TASK" com o texto digitado no campo de input como payload. Ela também limpa o campo de input.
6 - handleToggleTask é uma função que é chamada quando o checkbox de uma tarefa é clicado. Ela envia uma ação do tipo "TOGGLE_TASK" com o id da tarefa como payload.
7 - handleRemoveTask é uma função que é chamada quando o botão "Remove" de uma tarefa é clicado. Ela envia uma ação do tipo "REMOVE_TASK" com o id da tarefa como payload.
8 - O componente é retornado com um formulário para adicionar uma nova tarefa, uma lista de tarefas e, para cada tarefa, um checkbox para marcar como concluída e um botão para remover. Cada tarefa possui o texto da descrição e o id como chave única.
9 - O componente é exportado para que possa ser utilizado em outros arquivos.

3. Hook useReducer em Formulário de Nome/E-mail

Outro exemplo para compreendermos o useReducer é no caso em que precisamos manipular os dados de um formulário em nosso aplicativo. O reducer define o que acontece com o estado quando as ações são emitidas e usamos o gancho para controlar o estado inicial. Depois, temos campos de entrada que emitem ações para o nosso reducer e um botão de redefinição para redefinir os dados do formulário. Veja em Files>src>App.jsx:

1 - import React, { useReducer } from 'react';: Essa linha importa o React e o hook useReducer do pacote react.
2 - const initialState = { formData: { name: '', email: '' } };: Essa constante define o estado inicial do componente como um objeto que contém um objeto aninhado chamado formData, que, por sua vez, contém os campos de formulário name e email inicializados como strings vazias.
3 - function reducer(state, action) { ... }: Essa função é o reducer que será usado pelo hook useReducer. Ele recebe dois argumentos: o estado atual e uma ação. A função verifica o tipo de ação e, em seguida, retorna um novo estado de acordo.
4 - const [state, dispatch] = useReducer(reducer, initialState);: Essa linha usa o hook useReducer para gerenciar o estado do componente. Ela recebe dois argumentos: o reducer e o estado inicial. Em seguida, ela desestrutura o valor retornado pelo hook em duas variáveis: o estado atual e uma função chamada dispatch, que pode ser usada para enviar ações para o reducer.
5 - const handleUpdateFormData = formData => dispatch({ type: 'UPDATE_FORM_DATA', formData });: Essa função é um manipulador de eventos que é chamado quando os campos de formulário são alterados. Ele recebe um objeto formData como argumento e usa a função dispatch para enviar uma ação do tipo UPDATE_FORM_DATA para o reducer, passando o objeto formData como um segundo argumento.
6 - const handleResetFormData = () => dispatch({ type: 'RESET_FORM_DATA'});: Essa função é um manipulador de eventos que é chamado quando o botão "Reset" é clicado. Ele usa a função dispatch para enviar uma ação do tipo RESET_FORM_DATA para o reducer.
7 - <form>: Essa é a tag principal do formulário.
8 - <input type="text" name="name" value={state.formData.name} placeholder="Enter Your Name" onChange={e => handleUpdateFormData({[e.target.name]: e.target.value })} />: Essa é uma entrada de texto para o campo de nome. Ela recebe o valor atual do campo de nome doestado através da propriedade value, e usa o manipulador de eventos handleUpdateFormData para atualizar o estado quando o campo é alterado.
9 - handleUpdateFormData({ [e.target.name]: e.target.value })} />: este é um elemento de entrada HTML que representa um campo de formulário para o usuário inserir o endereço de e-mail. Quando o usuário digita um valor no campo, a função handleUpdateFormData é chamada para atualizar os dados do formulário.
10 - Reset: este é um elemento de botão HTML que tem um evento onClick que chama a função handleResetFormData quando o botão é clicado. Isso faz com que os dados do formulário sejam redefinidos para seus valores iniciais.
11 - export default App;: este código exporta o componente App para que ele possa ser usado em outros arquivos.

4. Formulário de busca com useReducer

Neste exemplo, testaremos o hook useReducer em um componente de formulário de busca. Acompanhe pelo Files>src>App.jsx:

1 - import React, { useReducer } from 'react';: Importa o módulo react e a função useReducer do módulo react.
2 - import './App.css': Importa o arquivo de estilos App.css para o componente App.
3 - const initialState = { query: '', results: [] };: Define o estado inicial do componente App, contendo um objeto com as propriedades query e results. A propriedade query armazena a string de pesquisa atual, enquanto a propriedade results armazena os resultados da pesquisa.
4 - const reducer = (state, action) => {...}: Define uma função reducer que recebe um estado atual e uma ação e retorna um novo estado. A função reducer é usada pelo useReducer para atualizar o estado do componente.
5 - const App = () => {...}: Define o componente App como uma função.
6 - const [state, dispatch] = useReducer(reducer, initialState);: Chama a função useReducer passando a função reducer e o estado inicial como argumentos. A função useReducer retorna um array com o estado atual e uma função dispatch que pode ser usada para disparar ações para a função reducer. O estado atual é armazenado na variável state, enquanto a função dispatch é armazenada na variável dispatch.
7 - const handleInputChange = e => {...};: Define uma função handleInputChange que é chamada toda vez que o usuário altera o valor do input de pesquisa. A função dispara uma ação UPDATE_QUERY para a função reducer, passando o valor atual do input como argumento.
8 - const handleSearch = () => {...};: Define uma função handleSearch que é chamada toda vez que o usuário clica no botão "Search". A função simula uma chamada a uma API, gerando alguns resultados de pesquisa fictícios e disparando uma ação UPDATE_RESULTS para a função reducer, passando os resultados como argumento.
9 - const handleReset = () => {...};: Define uma função handleReset que é chamada toda vez que o usuário clica no botão "Reset". A função dispara uma ação RESET para a função reducer, reinicializando o estado do componente para o estado inicial.
10 - return (...): Retorna o elemento JSX que representa o componente App. O elemento inclui um input de texto que exibe o valor da propriedade query do estado atual e chama a função handleInputChange toda vez que o valor é alterado. Também inclui dois botões que chamam as funções handleSearch e handleReset quando clicados. Por fim, o elemento inclui um conjunto de elementos div que exibem os resultados da pesquisa armazenados na propriedade results do estado atual.

Conclusão

O useReducer é um hook do React que permite que um componente gerencie seu próprio estado de maneira semelhante ao padrão reducer de uma aplicação Redux.

Ao invés de armazenar o estado diretamente no componente, o estado é armazenado em uma função reducer, que toma o estado atual e uma ação como argumentos e retorna o próximo estado da aplicação. Isso permite que a lógica de atualização do estado seja centralizada e facilita o gerenciamento de mudanças de estado complexas em componentes.

Além disso, o uso do useReducer pode tornar o código mais legível, pois a lógica de atualização do estado é isolada em uma única função, em vez de espalhada por todo o componente.

No entanto, é importante lembrar de que o useReducer não é a solução ideal para todos os casos e deve ser usado com moderação, considerando as necessidades específicas da sua aplicação.

marcelopetry.com

⚛Os 10 React Hooks Mais Úteis: 04 - useRef⚛

Marcelo Petry — Mon, 26 Dec 2022 21:48:17 +0000

Este é o quarto artigo de uma série de 10, que explica de forma simplificada e com exemplos, os react hooks mais utilizados em programação.

O hook useRef é muito útil para criar uma referência a um elemento DOM ou a um valor dentro de um componente funcional. Ele é frequentemente usado para acessar elementos DOM ou para armazenar valores que não precisam ser renderizados novamente quando o componente é atualizado.

Aplicabilidades do useRef

Armazenar uma referência a um elemento DOM:

Aqui está um exemplo de código de como o useRef pode ser usado para armazenar uma referência a um elemento DOM:

Neste exemplo, o useRef é usado para criar uma referência ao elemento input. A referência é armazenada na variável inputElement. Em seguida, a referência é passada para o atributo ref do elemento input usando o sintaxe ref={inputElement}.

Quando o botão é clicado, a função handleButtonClick é chamada. Ela usa a propriedade current da referência para acessar o elemento input e chama o método focus nele. Isso faz com que o cursor de entrada de texto seja colocado no elemento input.

1. Emprego do useRef em um elemento de lista

O caso abaixo mostra como usar o hook useRef para armazenar uma referência a um elemento de lista e adicionar itens dinamicamente:

1 - O hook useRef é importado do módulo react, assim como o hook useState.
2 - A função MyListComponent é criada, que renderiza o elemento de lista e um botão.
3 - Dentro da função, é criada uma nova referência usando o hook useRef e a armazena na variável listRef. O argumento inicial null é passado para a função useRef.
4 - O hook useState é usado para armazenar os itens da lista na variável items.
5 - A referência é passada para o atributo ref do elemento de lista usando a sintaxe ref={listRef}. Isso faz com que a instância do elemento seja armazenada na propriedade current da referência.
6 - A função handleButtonClick é criada para adicionar um novo item à lista e atualizar o scroll da lista para a última posição quando o botão é clicado. Ela usa o hook useState para adicionar um novo item à lista e atualiza a propriedade scrollTop da propriedade current da referência listRef para a altura total da lista usando a propriedade scrollHeight.
7 - O elemento de lista e o botão são renderizados no retorno da função. Quando o botão é clicado, a função handleButtonClick é chamada e um novo item é adicionado à lista e o scroll da lista é atualizado para a última posição.

2. Hook useRef em Dropdown de menu suspenso

Imagine que você tenha um componente Dropdown que renderiza um menu suspenso com uma lista de opções. Você pode usar o useRef para armazenar uma referência ao elemento ul que representa o menu suspenso e, em seguida, usar essa referência para controlar a exibição do menu suspenso através da alteração da propriedade display do estilo do elemento:

1 - O componente Dropdown recebe um array de opções como propriedade.
2 - O componente usa o useRef para criar uma referência ao elemento ul que representa o menu suspenso. Essa referência é armazenada na variável dropdownEl.
3 - O componente define uma função de manipulador de evento chamada handleToggleDropdown que é chamada quando o botão "Menu suspenso" é clicado. Essa função verifica o valor da propriedade display do elemento ul e altera esse valor para "block" ou "none", dependendo do seu estado atual.
4 - O componente renderiza um botão com o texto "Menu suspenso" e um elemento ul com as opções passadas como propriedade. O elemento ul é passado a referência criada pelo useRef através do atributo ref e é inicialmente oculto com a propriedade display definida como "none". Quando o botão é clicado, a função handleToggleDropdown é chamada e altera a propriedade display do elemento ul, exibindo ou ocultando o menu suspenso.

3. Armazenar uma referência a um valor

O hook useRef pode ser usado para armazenar uma referência a um valor em um componente funcional do React.

Ele é útil para armazenar valores que não mudam frequentemente, como referências a elementos do DOM, mas também pode ser usado para armazenar qualquer tipo de valor.

Por exemplo, imagine que você tenha um formulário em uma aplicação React e deseja obter o valor do input quando o usuário submete o formulário:

1 - O componente de formulário é criado usando a função Form.
2 - Dentro da função Form, é criada uma referência ao elemento de input usando a função useRef. A referência é inicializada com o valor null.
3 - É definida uma função de manipulador de envio, que é chamada quando o formulário é submetido. A função chama event.preventDefault() para evitar que a página seja recarregada pelo navegador.
4 - A função de manipulador de envio obtém o valor do elemento de input usando inputEl.current.value.
5 - A função de manipulador de envio chama a função submitForm com o valor do input como argumento.
6 - O componente é renderizado como um elemento form do HTML, com um manipulador de envio atribuído ao atributo onSubmit. Ele também renderiza um elemento label e um elemento input como filhos do elemento de formulário, além de um botão de envio.
7 - Quando o usuário preenche o campo de entrada e clica no botão de envio, o componente obtém o valor do campo de entrada e chama a função submitForm com esse valor como argumento.

4. Armazenar referência a um objeto de websocket

O useRef é útil para armazenar valores que não precisam ser renderizados novamente quando o componente é atualizado. Por exemplo, você pode usar o useRef para armazenar uma referência a um objeto de websocket, como este:

1 - Neste exemplo, o hook useRef é usado para criar uma referência para o objeto WebSocket. A referência é armazenada na variável socketRef.
2 - Em seguida, o hook useEffect é usado duas vezes para configurar e limpar o objeto WebSocket. A primeira vez, o useEffect é usado para criar um novo objeto WebSocket quando o componente é montado. A segunda vez, o useEffect é usado para fechar o objeto WebSocket quando o componente é desmontado.
3 - Por fim, uma função sendMessage é criada que usa a referência para enviar mensagens pelo WebSocket. O componente renderiza um botão que, quando clicado, chama a função sendMessage para enviar uma mensagem pelo WebSocket.

O hook useRef é útil neste exemplo porque permite armazenar a referência ao objeto WebSocket de forma que ela não seja atualizada quando o componente é atualizado. Isso é útil porque o objeto WebSocket não precisa ser recriado toda vez que o componente é renderizado novamente. Em vez disso, ele pode ser acessado diretamente através da referência armazenada no useRef.

Armazenar uma referência a uma instância de um componente de terceiros:

O hook useRef também pode ser usado para armazenar uma referência a uma instância de um componente de terceiros em um componente funcional do React.

Alguns exemplos de componentes de terceiros cujos métodos podem ser acessados usando o useRef incluem bibliotecas de mapas, bibliotecas de gráficos, bibliotecas de edição de texto, entre outros.

1. Hook useRef para acessar a instância de um componente de mapa

O exemplo abaixo mostra como usar o hook useRef para armazenar uma referência a uma instância de um componente de mapa de terceiros, neste caso o componente GoogleMap:

1 - O hook useRef é importado do módulo react e o componente GoogleMap é importado de uma biblioteca de mapas.
2 - A função MyMapComponent é criada, que renderiza o componente GoogleMap e um botão.
3 - Dentro da função, é criada uma nova referência usando o hook useRef e a armazena na variável mapRef. O argumento inicial null é passado para a função useRef.
4 - A referência é passada para o atributo ref do componente GoogleMap usando a sintaxe ref={mapRef}. Isso faz com que a instância do componente seja armazenada na propriedade current da referência.
5 - A função handleButtonClick é criada para recentralizar o mapa quando o botão é clicado. Ela usa a propriedade current da referência mapRef para acessar o método recenter do componente de mapa e passa as coordenadas de latitude e longitude como argumento.
6 - O componente GoogleMap e o botão são renderizados no retorno da função. Quando o botão é clicado, a função handleButtonClick é chamada e o mapa é recentralizado nas coordenadas especificadas.

2. useRef para acessar bilbiotecas de gráficos

O modelo abaixo mostra como usar o hook useRef para armazenar uma referência a uma instância de um componente de gráfico de terceiros, neste caso o componente Chart:

1 - O hook useRef é importado do módulo react e o componente Chart é importado de uma biblioteca de gráficos.
2 - A função MyChartComponent é criada, que renderiza o componente Chart e um botão.
3 - Dentro da função, é criada uma nova referência usando o hook useRef e a armazena na variável chartRef. O argumento inicial null é passado para a função useRef.
4 - A referência é passada para o atributo ref do componente Chart usando a sintaxe ref={chartRef}. Isso faz com que a instância do componente seja armazenada na propriedade current da referência.
5 - A função handleButtonClick é criada para atualizar os dados do gráfico quando o botão é clicado. Ela usa a propriedade current da referência chartRef para acessar o método update do componente de gráfico e passa um novo conjunto de dados como argumento.
6 - O componente Chart e o botão são renderizados no retorno da função. Quando o botão é clicado, a função handleButtonClick é chamada e os dados do gráfico são atualizados com os novos valores.

3. Hook useRef para armazenar uma referência a um componente de edição de texto

Ainda, podemos utilizar o useRef para armazenar uma referência a uma instância de um componente de edição de texto de terceiros, neste caso o componente Quill:

1 - O hook useRef é importado do módulo react e o componente Quill é importado de uma biblioteca de edição de texto.
2 - A função MyEditorComponent é criada, que renderiza o componente Quill e um botão.
3 - Dentro da função, é criada uma nova referência usando o hook useRef e a armazena na variável editorRef. O argumento inicial null é passado para a função useRef.
4 - A referência é passada para o atributo ref do componente Quill usando a sintaxe ref={editorRef}. Isso faz com que a instância do componente seja armazenada na propriedade current da referência.
5 - A função handleButtonClick é criada para limpar o conteúdo do editor quando o botão é clicado. Ela usa a propriedade current da referência editorRef para acessar o método setText do componente de edição de texto e passa uma string vazia como argumento.
6 - O componente Quill e o botão são renderizados no retorno da função.

Conclusão

O useRef é um hook do React que permite armazenar uma referência a um valor. Ele é útil para armazenar valores que não mudam frequentemente, como referências a elementos do DOM, mas também pode ser usado para armazenar qualquer tipo de valor. O useRef é um jeito conveniente de acessar elementos do DOM em uma aplicação React e pode ser usado em conjunto com outros hooks, como o useEffect, para realizar tarefas em resposta a mudanças no estado ou propriedades de um componente.

Um dos usos mais comuns do useRef é para acessar valores de elementos do DOM em uma aplicação React. Por exemplo, o useRef pode ser usado para obter o valor de um campo de entrada em um formulário ou para obter a altura ou largura de um elemento na página. Além disso, o useRef pode ser usado para armazenar instâncias de objetos de terceiros, como bibliotecas de mapas ou gráficos, e acessar os métodos e propriedades desses objetos.

A importância do useRef reside em sua capacidade de fornecer acesso a valores que não são gerenciados pelo estado do React ou pelas props de um componente. Isso é especialmente útil em situações em que você deseja acessar ou alterar valores em resposta a eventos ou mudanças no estado do componente, mas não quer renderizar o componente novamente quando esses valores mudam.

Portanto, o useRef é uma ferramenta útil para acessar e armazenar valores em uma aplicação React e pode ser usado em conjunto com outros hooks para realizar tarefas em resposta a mudanças no estado ou propriedades de um componente. Ao usar o useRef, é importante lembrar de atribuir a referência ao atributo ref do elemento ao qual você deseja ter acesso e lembrar de usar .current para acessar o valor armazenado na referência.

marcelopetry.com

⚛Os 10 React Hooks Mais Úteis: 03 - useContext⚛

Marcelo Petry — Sat, 24 Dec 2022 03:13:04 +0000

Este é o terceiro artigo de uma série de 10, que explica de forma simplificada e com exemplos, os react hooks mais utilizados em programação.

O useContext é um hook do React que permite acessar o contexto de um componente de forma fácil e simples. Ele é muito útil quando precisamos compartilhar informações entre componentes de forma acessível e sem precisar passar manualmente por todos os componentes intermediários.
Para usar o useContext, primeiro precisamos criar um contexto. Isso é feito usando a função createContext:

Aqui, criamos um contexto chamado MyContext. Ele vai nos permitir compartilhar informações entre componentes.

Em seguida, precisamos fornecer o contexto para os componentes que precisam acessá-lo. Isso é feito usando o componente Provider:

Agora, estamos passando o objeto value para o contexto usando o Provider. Qualquer componente que esteja dentro do Provider terá acesso ao contexto.

Para acessar o contexto em um componente, usamos o hook useContext:

Nexte exemplo, estamos usando o useContext para acessar o contexto criado anteriormente. O valor retornado pelo useContext é o mesmo valor passado para o Provider (no caso, o objeto value).

Então, o exemplo completo seria:

O código acima cria um contexto chamado MyContext usando a função createContext do React. Em seguida, o contexto é fornecido para os componentes que precisam acessá-lo usando o componente Provider. Por fim, o contexto é acessado em um componente usando o hook useContext.

Na função App, criamos um objeto chamado value com uma propriedade foo. Em seguida, passamos o objeto value para o contexto usando o Provider. Qualquer componente que esteja dentro do Provider terá acesso ao contexto. No caso, estamos renderizando um componente chamado MyComponent dentro do Provider.

Na função MyComponent, usamos o hook useContext para acessar o contexto criado anteriormente. O valor retornado pelo useContext é o mesmo valor passado para o Provider (no caso, o objeto value). Em seguida, retornamos um elemento div com o valor da propriedade foo do objeto value.

Em resumo, esse código permite compartilhar informações entre componentes de forma acessível e sem precisar passar manualmente por todos os componentes intermediários usando o contexto e o useContext.

Aplicabilidades do useContext

Compartilhar um tema entre componentes

Imagine que você tem um aplicativo que tem um tema dark e light e você quer permitir que o usuário altere o tema. Você pode criar um contexto chamado ThemeContext que armazena o tema atual (dark ou light) e uma função para alterar o tema. Em seguida, você pode usar o hook useContext para ler o valor do contexto e a função para alterar o tema em qualquer componente filho que precisa acessar essas informações. Veja:

1 - O código começa importando os módulos createContext, useContext e useState do React;
2 - Em seguida, é criado um contexto chamado ThemeContext usando createContext;
3 - O componente ThemeProvider é criado e usa o hook useState para gerenciar o estado do tema atual (dark ou light). O componente de contexto ThemeContext.Provider é usado para fornecer o contexto aos componentes filho. O valor do contexto é passado como um prop para o componente de contexto e inclui o tema atual e uma função para alterar o tema;
4 - O componente Child é criado e usa o hook useContext para ler o contexto ThemeContext. O valor do contexto é armazenado nas variáveis theme e setTheme.
5 - O componente Child renderiza um parágrafo que exibe o tema atual e um botão que, quando clicado, chama a função setTheme para alterar o tema para light.
6 - O componente App é criado e renderiza o componente ThemeProvider, que por sua vez renderiza o componente Child. Isso significa que o contexto ThemeContext está disponível para o componente Child.

Acessar dados do usuário em vários componentes

Outro uso comum do hook useContext ocorre no caso em que você tem um aplicativo que precisa acessar dados do usuário em vários componentes.
Em vez de passar os dados do usuário como propriedade para cada componente, você pode usar um contexto para armazenar os dados do usuário e usar o hook useContext para ler os dados em qualquer componente que precisa acessá-los.
Aqui está o código que implementa esse comportamento:

1 - O código começa importando os módulos createContext e useContext do React.
2 - Em seguida, é criado um contexto chamado UserContext usando createContext.
3 - O componente Child é criado e usa o hook useContext para ler o contexto UserContext. O valor do contexto (no caso, os dados do usuário) é armazenado na variável user.
4 - O componente App é criado e usa o componente de contexto UserContext.Provider para fornecer o contexto aos componentes filho.
5 - O valor do contexto é passado como um prop para o componente de contexto. No exemplo, os dados do usuário são passados como o valor do contexto.
6 - O componente Child é renderizado dentro do componente App, então o contexto UserContext está disponível para ele. O componente Child usa o hook useContext para ler o contexto e exibe o nome do usuário.

Gerenciamento de idioma

Você pode usar um contexto para armazenar o idioma atual do aplicativo e permitir que os componentes filho acessem e alterem o idioma.

1 - O código começa importando os módulos createContext, useContext e useState do React.
2 - Em seguida, é criado um contexto chamado LanguageContext usando createContext.
3 - O componente LanguageProvider é criado e usa o hook useState para gerenciar o estado do idioma atual (en ou pt-BR). O componente de contexto LanguageContext.Provider é usado para fornecer o contexto aos componentes filho. O valor do contexto é passado como um prop para o componente de contexto e inclui o idioma atual e uma função para alterar o idioma.
4 - O componente Child é criado e usa o hook useContext para ler o contexto LanguageContext. O valor do contexto é armazenado nas variáveis language e setLanguage.
5 - O componente Child renderiza um parágrafo que exibe o idioma atual e um botão que, quando clicado, chama a função setLanguage para alterar o idioma para pt-BR.
6 - O componente App é criado e renderiza o componente LanguageProvider, que por sua vez renderiza o componente Child. Isso significa que o contexto LanguageContext está disponível para o componente Child.

Hook useContext em autenticação

Você pode usar um contexto para armazenar o status de autenticação do usuário e permitir que os componentes filho acessem e alterem o status de autenticação. Acompanhe:

Neste código, o contexto AuthContext é criado usando createContext.
1 - O componente AuthProvider usa o hook useState para gerenciar o estado de autenticação do usuário (autenticado ou não).
2 - O componente de contexto AuthContext.Provider é usado para fornecer o contexto aos componentes filho e passa o status de autenticação atual e uma função para alterar o status de autenticação como o valor do contexto.
3 - O componente Child usa o hook useContext para ler o contexto e exibe o status de autenticação atual.
4 - O componente Child também renderiza um botão que, quando clicado, chama a função setIsAuthenticated para alterar o status de autenticação para true.
5 - O componente App usa o componente de contexto AuthProvider para fornecer o contexto aos componentes filho e renderiza o componente Child. Dessa forma, o componente Child pode ler o status de autenticação a partir do contexto e alterá-lo quando necessário.

Conclusão

O hook useContext é uma ferramenta útil para compartilhar dados entre componentes no React sem ter que passar manualmente esses dados como props a cada nível de componente.
Ao criar um contexto com createContext, é possível fornecer o contexto aos componentes filho usando o componente de contexto Context.Provider e ler o contexto em qualquer componente filho usando o hook useContext. Isso pode ser útil para gerenciar o estado de aplicativos de forma mais eficiente e simplificar a propagação de dados em aplicativos de grande escala.
No entanto, é importante lembrar de usar o useContext de maneira apropriada para evitar problemas de performance e manter o código organizado e fácil de manter.

Autor: Marcelo Schäffer Petry
marcelopetry.com

⚛Os 10 React Hooks Mais Úteis: 02 - useEffect⚛

Marcelo Petry — Thu, 22 Dec 2022 22:00:06 +0000

Este é o segundo artigo de uma série de 10, que explica de forma simplificada e com exemplos, os react hooks mais utilizados em programação.

O hook useEffect permite que você execute efeitos secundários em componentes de função em React. Isso inclui coisas como modificar o DOM, fazer solicitações HTTP ou adicionar event listeners. O useEffect é chamado após a renderização do componente e pode ser usado para substituir a maioria dos métodos de ciclo de vida como componentDidMount, componentDidUpdate e componentWillUnmount.

Empregos do hook useEffect

Aqui está um exemplo básico de como o useEffect pode ser usado para exibir uma mensagem no console quando o componente é montado:

Neste exemplo, o useEffect é chamado após a renderização inicial do componente e exibe a mensagem no console. O array vazio de dependências garante que este efeito seja executado apenas uma vez, assim como o método componentDidMount em um componente de classe.

useEffect em Event Listeners

Este hook pode ser usado para adicionar um event listener ao clique de um botão:

No caso acima, o hook useEffect é usado para adicionar um event listener de clique ao botão quando o componente é montado. Quando o componente é desmontado, o listener é removido usando a função de retorno fornecida pelo useEffect. O array vazio de dependências garante que este efeito seja executado apenas uma vez, assim como o componentDidMount em um componente de classe.

Hook useEffect para Solicitações HTTP

Também, pode ser usado para fazer uma solicitação HTTP e atualizar o estado com a resposta. Acompanhe:

No exemplo acima, o hook useEffect é usado para fazer uma solicitação HTTP para a rota /api/users quando o componente é montado e atualizar o estado com a resposta.

O hook useState é usado para gerenciar o estado dos usuários no componente. O primeiro argumento é um array de usuários inicialmente vazio e o segundo é uma função para atualizar o estado.

O useEffect é chamado com uma função que realiza a solicitação HTTP usando o fetch e um array vazio de dependências. Isso garante que o efeito seja executado apenas uma vez, assim como o método componentDidMount em um componente de classe.

Quando a resposta é recebida, o hook useState é usado para atualizar o estado com a lista de usuários. Isso atualiza o componente e a lista de usuários é exibida na tela.

Emprego em Redimensionamento de Janelas

Outra forma, é a partir de event listeners para redimensionamento de janelas. Veja:

Neste exemplo, o hook useEffect é usado para adicionar um event listener de redimensionamento da janela quando o componente é montado. Quando o componente é desmontado, o listener é removido usando a função de retorno fornecida pelo useEffect. O array vazio de dependências ([]) garante que este efeito seja executado apenas uma vez.

Atualizar Título da Página com useEffect

Este hook pode ser utilizado para atualizar o título da página com o nome do usuário atual:

Desta vez, o hook useEffect é usado para atualizar o título da página com o nome do usuário atual sempre que o usuário for alterado. O array de dependências ([user]) garante que este efeito seja executado sempre que o usuário for alterado, mas não seja executado na primeira renderização do componente.

Alternar Classes de Estilo Dark/Light Mode

Outra importante aplicabilidade do hook useEffect é na alternância entre classes de estilo no corpo da página com base em uma propriedade de estado:

Nesse caso, o hook useEffect é usado para adicionar ou remover a classe dark-mode do corpo da página com base na propriedade de estado isDarkMode.

O hook useState é usado para gerenciar o estado do modo escuro no componente. O primeiro argumento é um valor booleano inicialmente falso que indica se o modo escuro está ativado ou não e o segundo é uma função para atualizar o estado.

O useEffect é chamado com uma função que verifica o valor de isDarkMode e adiciona ou remove a classe dark-mode do corpo da página, e um array de dependências que inclui apenas isDarkMode. Isso garante que o efeito seja executado sempre que o modo escuro for alterado, mas não seja executado na primeira renderização do componente.

O componente exibe um botão com o texto "Alternar modo escuro". Quando o botão é clicado, a função de retorno do useState é chamada para alternar o valor de isDarkMode entre true e false, o que aciona o useEffect e adiciona ou remove a classe dark-mode do corpo da página.

Conclusão

O useEffect é um dos hooks mais importantes do React e é muito útil para realizar efeitos colaterais em componentes de função. Ele é chamado após a renderização do componente e pode ser usado para substituir a maioria dos métodos de ciclo de vida.

O useEffect é flexível e pode ser usado para uma variedade de tarefas, incluindo modificar o DOM, fazer solicitações HTTP ou interagir com event listeners. Ele também pode ser usado para atualizar o estado de um componente com base em alterações externas, como mudanças no tamanho da janela ou no título da página.

É importante lembrar de passar um array de dependências para o useEffect para garantir que ele seja executado apenas quando as variáveis especificadas mudam. Isso pode ajudar a evitar efeitos colaterais indesejados e melhorar o desempenho do seu aplicativo.
Em suma, o hook useEffect é uma ferramenta poderosa e versátil para gerenciar efeitos colaterais em componentes de função do React e é uma parte essencial da biblioteca de hooks do React.

Autor: Marcelo Schäffer Petry
marcelopetry.com

Como Usar o Spread Operator (…) em React ⚛

Marcelo Petry — Wed, 21 Dec 2022 22:29:51 +0000

O operador de espalhamento (spread operator) é um recurso do JavaScript que permite que um objeto iterável, como um array ou uma string, seja expandido em vários elementos individuais. Ele é representado por três pontos seguidos (...).

Exemplo:

O operador de espalhamento também pode ser usado em objetos literais para copiar as propriedades de um objeto para outro:

Aplicabilidades do Spread Operator em React

No React, o operador de espalhamento (...) é frequentemente usado para passar propriedades de um componente pai para um componente filho. Por exemplo:

Isso permite que todas as propriedades passadas para MyComponent sejam passadas para OtherComponent sem precisar especificar cada uma delas individualmente.

Outro uso comum do operador de espalhamento no React é ao trabalhar com estado imutável. Por exemplo, digamos que você tenha um estado de objeto com uma propriedade chamada “items” que é um array de itens. Se você quiser adicionar um novo item a esse array, em vez de modificar o array original, é possível criar uma cópia do array e adicionar o novo item a ela usando o operador de espalhamento.

Exemplo:

Aqui, a cópia do array de itens é criada usando o operador de espalhamento e o novo item é adicionado a ela com o operador de concatenação ([...this.state.items, 4]). Depois, o novo array é passado para o método setState para atualizar o estado. Dessa forma, o estado original não é modificado, o que é importante no React, já que o estado deve ser imutável.

Além disso, o operador de espalhamento também pode ser usado para passar um número variável de argumentos para uma função. Por exemplo:

Neste exemplo, o array de números é expandido em três argumentos individuais usando o operador de espalhamento e então passado para a função sum. O resultado é o mesmo que se tivéssemos chamado a função como sum(1, 2, 3).

Atualizar propriedades de um objeto:

No exemplo acima, o estado do componente inclui um objeto chamado “user” com duas propriedades: “name” e “age”. O método updateUser atualiza a propriedade "age" do objeto usando o operador de espalhamento para copiar as propriedades existentes do objeto e adicionar a nova propriedade "age".

Clonar um componente e passar propriedades personalizadas para ele:

Aqui, o componente MyButton é um componente de botão genérico que aceita qualquer conteúdo como filhos e uma função de retorno de chamada para a propriedade onClick. O componente App clona o componente MyButton e passa uma nova função de retorno de chamada para a propriedade onClick usando o operador de espalhamento.

Passar todas as propriedades de um componente para outro componente:

Neste exemplo, o componente MyComponent recebe propriedades e as passa para o componente OtherComponent usando o operador de espalhamento. Isso permite que qualquer propriedade passada para MyComponent seja passada para OtherComponent sem precisar especificar cada uma delas individualmente.

Unir dois arrays:

Este exemplo mostra como usar o operador de espalhamento para unir dois arrays em um único array. O array arr1 e o array arr2 são expandidos em elementos individuais usando o operador de espalhamento e então concatenados usando o operador de concatenação ([...]).

Passar um número variável de argumentos para uma função:

Neste exemplo, a função sum espera três argumentos (x, y, e z) e retorna a soma deles. O array de números é expandido em três argumentos individuais usando o operador de espalhamento e então passado para a função sum. O resultado é o mesmo que se tivéssemos chamado a função como sum(1, 2, 3).

Conclusão

O operador de espalhamento (spread operator) é uma ferramenta poderosa do JavaScript que permite expandir objetos iteráveis em elementos individuais ou copiar propriedades de um objeto para outro. No React, o operador de espalhamento é amplamente utilizado para passar propriedades de um componente pai para um componente filho, atualizar estado imutável, clonar componentes e passar propriedades personalizadas para eles, e passar um número variável de argumentos para uma função.

Usar o operador de espalhamento pode tornar o código mais conciso e legível, além de facilitar a manipulação de dados. No entanto, é importante lembrar que o operador de espalhamento também pode ter algumas limitações, como a incapacidade de clonar objetos profundamente aninhados ou a possibilidade de sobrescrever propriedades existentes se o objeto de espalhamento vier depois do objeto de destino.

Em resumo, o operador de espalhamento é uma ferramenta valiosa no React e em outras situações do JavaScript que pode ajudar a escrever código mais eficiente e legível. É importante entender como ele funciona e quando usá-lo para aproveitar ao máximo seus benefícios.

Autor: Marcelo Schäffer Petry

marcelopetry.com

⚛Os 10 React Hooks Mais Úteis: 01 - useState⚛

Marcelo Petry — Wed, 21 Dec 2022 14:18:31 +0000

Este é o primeiro artigo de uma série de 10, que explica de forma simplificada e com exemplos, os react hooks mais utilizados em programação.

O Hook useState é um dos Hooks mais importantes e mais usados no React. Ele permite que você gerencie o estado em componentes funcionais de forma semelhante a como faria em componentes de classe.

Aqui está um exemplo básico de como usar o useState para gerenciar o estado de um componente funcional:

Neste exemplo, estamos usando o useState para gerenciar o estado de um contador. Quando o usuário clica no botão, a função setCount é chamada para atualizar o valor de count. O useState retorna um par de valores: o estado atual e uma função para atualizá-lo.

O valor inicial de count é definido como 0 quando chamamos o useState. Você pode passar qualquer valor que desejar como o valor inicial para o estado. Por exemplo, se quisermos começar o contador com um valor de 10, poderíamos fazer isso assim:

Gerenciamento de Objetos e Arrays

O useState também pode ser usado para gerenciar o estado de outros tipos de valores, como objetos ou arrays. Aqui está um exemplo de como usar o useState para gerenciar o estado de um objeto:

Neste exemplo, estamos usando o useState para gerenciar o estado de um objeto que representa um usuário. Quando o usuário clica no botão, a função setUser é chamada para atualizar o valor de user.

Hook useState em Formulários

Outra aplicabilidade do useState é quando precisamos gerenciar o estado de um formulário com nome, e-mail e senha. Veja:

Neste exemplo, estamos usando o useState para gerenciar o estado de um formulário. O estado é um objeto que contém os valores dos campos de formulário. Quando o usuário altera um campo, chamamos a função handleChange para atualizar o valor correspondente no estado.

Gerenciamento do Estado de Toggle

Outro uso comum do useState ocorre quando queremos gerenciar o estado de um toggle:

No exemplo acima, estamos usando o useState para gerenciar o estado de um toggle. Quando o usuário clica no botão, chamamos a função setIsOn para inverter o valor de isOn.

O useState é inicializado com o valor false, que representa o estado "off" do toggle. Quando o usuário clica no botão, chamamos a função setIsOn com o operador de negação !, o que inverte o valor de isOn de false para true ou de true para false.

Hook useState para Gerenciar Listas

Também, emprega-se o hook useState para gerenciar o estado de uma lista de itens expansíveis:

Neste exemplo, estamos usando o useState para gerenciar o estado de uma lista de itens expansíveis. O estado é um array de objetos que representam cada item, com um texto e um indicador de se o item está expandido ou não.

Quando o usuário clica em um item, chamamos a função toggleExpanded para alternar o estado de expansão do item. Para fazer isso, criamos uma cópia do array de itens usando a sintaxe de propagação (...), alteramos o valor do indicador de expansão do item correspondente e chamamos a função setItems para atualizar o estado.

Gerenciamento de Carrinho de Compras

Ainda, o useState pode ser aplicado no gerenciamento de um carrinho de compras. Acompanhe:

No exemplo, a primeira coisa que fazemos é importar o hook useState do React. Em seguida, criamos uma função chamada Example que renderiza um componente.

Dentro da função Example, usamos o hook useState para inicializar o estado do carrinho como um array vazio. Isso é feito através da seguinte linha de código:

O hook useState retorna um par de valores: o estado atual e uma função para atualizar o estado. No caso do estado do carrinho, chamamos esses valores de cart e setCart, respectivamente.

Em seguida, criamos duas funções: addToCart e removeFromCart. A função addToCart é chamada quando o usuário clica em um dos botões "Adicionar Item" e adiciona um novo item ao carrinho usando a sintaxe de propagação (...). A função removeFromCart é chamada quando o usuário clica no botão "Remover do carrinho" e remove o item do carrinho usando o método filter.

Por fim, renderizamos o componente. Primeiro, mostramos os itens no carrinho usando um loop map e um botão para remover cada item. Em seguida, mostramos os itens disponíveis para adicionar ao carrinho usando três botões. Quando o usuário clica em um desses botões, chamamos a função addToCart para adicionar o item ao carrinho.

Conclusão

O hook useState é um dos hooks mais importantes e amplamente utilizados em React, pois permite que você gerencie o estado de seu componente de maneira simples e declarativa.

Com o useState, é possível armazenar qualquer tipo de valor como estado, como números, strings, objetos ou arrays, e atualizar esse estado com facilidade usando a função setState.

O uso do useState é fundamental para construir aplicativos interativos com React, pois permite que você crie componentes que possam reagir a ações do usuário, como cliques em botões ou mudanças em formulários, e atualizar o estado de acordo.

Além disso, o useState é muito útil para separar o estado lógico do seu componente da lógica de renderização, o que torna o código mais fácil de entender e manter.

Em resumo, o useState é uma ferramenta fundamental para qualquer desenvolvedor React que busca criar aplicativos interativos e reutilizáveis.

Autor: Marcelo Schäffer Petry

marcelopetry.com