
O hook `useTransition` foi introduzido no React 18 e permite marcar atualizações de estado como não urgentes, ajudando o React a priorizar interações mais importantes e manter a interface mais responsiva.

Por padrão, todas as atualizações de estado no React (setState) são tratadas como urgentes e executadas assim que são chamadas. Mas existem situações onde um `setState` depende da interação do usuário ou não precisa ser executado imediatamente, como:

- Redirecionamento.
- Mudança de abas.
- Busca e listagem de itens.
- Realização de cálculos caros p/ memória.

Em muitos casos, múltiplas interações consecutivas podem gerar renderizações desnecessárias, interfaces pouco responsivas e até problemas de race condition caso respostas assíncronas cheguem fora de ordem.

Estratégias como desabilitar interações do usuário temporariamente ou adicionar delays, aguardar alguns milissegundos depois da interação do usuário, são usados mas acabam prejudicando a experiência do usuário que precisa esperar a ação acontecer para realizar uma nova.

Nesses casos podemos usar o hook `useTransition` para marcar atualizações de estado como não urgentes, inclusive em fluxos assíncronos, para que o React possa priorizar interações mais importantes do usuário e manter a interface mais responsiva.

### Uso

```jsx
const [isPending, startTransition] = useTransition();
```

Documentação: https://react.dev/reference/react/useTransition

## Exemplo

Como exemplo vamos usar um componente para simular o cálculo de um carrinho de compras.

Para o código parecer mais limpo eu removi as classes e atributos de acessibilidade. A função _fetchTotalPrice_ é apenas uma promise que resolve 2 segundos depois. Você pode ver o código completo [aqui](https://github.com/Sergioamjr/my-website-v2/blob/main/src/posts/pt/react-hook-use-transition/UsingUseTransition/index.tsx).

<NotUsingUseTransition />

```jsx
import { useState } from 'react';

export default function WithoutStartTransitionUsage() {
  const [isPending, setIsPending] = useState(false);
  const [quantity, setQuantity] = useState(1);
  const [totalPrice, setTotalPrice] = useState(quantity * price);

  const onChangeQuantityHandler = async (quantity) => {
    setIsPending(true);
    const newPrice = await fetchTotalPrice(quantity);
    setTotalPrice(newPrice);
    setIsPending(false);
  };

  const onIncreaseQuantity = () => {
    setQuantity((prev) => prev + 1);
    onChangeQuantityHandler(quantity + 1);
  };

  const onDecreaseQuantity = () => {
    setQuantity((prev) => prev - 1);
    onChangeQuantityHandler(quantity - 1);
  };

  return (
    <>
      <p>Quantidade:</p>
      <div>
        <button onClick={onDecreaseQuantity}>-</button>
        <span>{quantity}</span>
        <button onClick={onIncreaseQuantity}>+</button>
      </div>

      <p>Preço Total:</p>
      <p>{isPending ? 'Calculando...' : totalPrice}</p>
    </>
  );
}
```

Ao mudar a quantidade várias vezes seguidas, perceba que o valor total é atualizado após o período de loading, causando uma inconsistência na interface, além de renderizações excessivas desnecessárias.

Poderíamos usar a flag `isPending` para bloquear os botões mas isso não oferece uma usabilidade muito boa para o usuário.

<NotUsingUseTransition
  disableOnPending
  title="Sem useTransition & Bloqueando Ação"
/>

### Usando o hook useTransition

Agora vamos ver o mesmo exemplo usando o hook `useTransition`.

<UsingUseTransition />

```jsx
import { useTransition, useState } from 'react';

export default function StartTransitionUsage() {
  const [quantity, setQuantity] = useState(1);
  const [totalPrice, setTotalPrice] = useState(quantity * price);
  const [isPending, startTransition] = useTransition();

  const onChangeQuantityHandler = (quantity) => {
    startTransition(async () => {
      const newPrice = await fetchTotalPrice(quantity);
      startTransition(() => {
        setTotalPrice(newPrice);
      });
    });
  };

  const onIncreaseQuantity = () => {
    setQuantity((prev) => prev + 1);
    onChangeQuantityHandler(quantity + 1);
  };

  const onDecreaseQuantity = () => {
    setQuantity((prev) => prev - 1);
    onChangeQuantityHandler(quantity - 1);
  };

  return (
    <>
      <p>Quantidade:</p>
      <div>
        <button onClick={onDecreaseQuantity}>-</button>
        <span>{quantity}</span>
        <button onClick={onIncreaseQuantity}>+</button>
      </div>

      <p>Total:</p>
      <p>{isPending ? 'Calculando...' : totalPrice}</p>
    </>
  );
}
```

Agora a interface parece mais responsiva porque o React prioriza a atualização da quantidade enquanto o cálculo e exibição do preço total são tratados como atualizações não urgentes.

Além disso os botões continuam disponíveis para o usuário e não precisamos de mais um _setState_ (setIsPending) para controlar quando uma ação está ocorrendo.

### Transições Assíncronas

Você também deve ter notado que dentro da função `onChangeQuantityHandler` há dois `startTransition`. Um com a requisição assíncrona para `fetchTotalPrice` e outro para o setState `setTotalPrice`.

```jsx
const onChangeQuantityHandler = (price) => {
  startTransition(async () => {
    const newPrice = await fetchTotalPrice(price);
    startTransition(() => {
      setTotalPrice(newPrice);
    });
  });
};
```

Isso é necessário porque o React atualmente perde o contexto da transição após um `await`. Dessa forma garantimos que a transição ainda esteja acontecendo até `setTotalPrice` ser chamado.

Para chamadas síncronas só é necessário um `startTransition`:

```jsx
startTransition(() => {
  setUser(null);
  setSession(null);
});
```

### Tratando Erros

Como em qualquer requisição assíncrona podemos lidar com um erro dentro de um _startTransition_ usando um _try/catch_ para tratar o erro e mostrar uma mensagem para o usuário.

<UsingUseTransitionWithErrorHandler />

```jsx
export default function StartTransitionUsage() {
  const [hasError, setHasError] = useState(false);
  //...
  const onChangeQuantityHandler = (price) => {
    setHasError(false);
    startTransition(async () => {
      try {
        const newPrice = await fetchTotalPrice(price);
        startTransition(() => {
          setTotalPrice(newPrice);
        });
      } catch {
        setHasError(true);
      }
    });
  };
}
```

Nesse caso o estado de erro foi mantido fora da transição propositalmente, já que feedbacks de erro normalmente devem ser atualizações urgentes para o usuário.

### Conclusão

O hook `useTransition` foi criado para resolver o pequeno problema de renderizações excessivas e desnecessárias mas que numa aplicação acaba prejudicando a performance da página e experiência do usuário. Com ele é possível tornar a interface mais responsiva sem a necessidade de adicionar complexidade extra ao código.

Na próxima vez que perceber um gargalo na performance da página ou estiver criando um estado para indicar que uma ação está ocorrendo, considere usar o hook `useTransition`, isso deve melhorar bastante a experiência do usuário.


Otimizando Aplicações React com o Hook useTransition


A área de desenvolvimento sempre evoluiu muito rápido mas nada parecido com era da inteligência artificial que estamos vivendo agora. Chega ser difícil se manter atualizado com tantas coisas novas para aprender; agents, subagents, mcp, skills, . Como e quando utilizo tudo isso?

Eu estava tendo essa dificuldade. Não sabia como e por onde começar, comprei cursos, assisti vídeos, li artigos mas o que realmente me ensinou foi botar a mão na massa. Paguei a mensalidade do Claude Code ($20/mês 🥲) e comecei a usar a IA para programar. 

Muita coisa passou a fazer sentido pra mim e gostaria de compartilhar o que estou aprendendo na minha jornada de me manter atualizado na era da inteligência artificial aqui no meu blog. E antes de qualquer coisa acho importante explicar os conceitos e termos mais comuns relacionados a desenvolvimento com IA.

## Sumário
- [LLM](#llm-(grande-modelo-de-linguagem))
- [Tokens](#tokens)
- [Prompt](#prompt)
- [Embeddings](#embeddings)
- [RAG](#rag-(retrieval-augmented-generation))
- [MCP](#mcp-(model-context-protocol))
- [AI Agent](#ai-agent-(agente-de-ia))
- [Skills](#skills)
- [Subagents](#subagents)
- [Spec Driven Development](#sdd-(spec-driven-development))
- [Conclusão](#conclusão)

### LLM (Grande Modelo de Linguagem)
LLM é o grande cérebro por trás da IA. Ele é treinado com uma quantidade enorme de dados, o que lhe permite processar uma informação e retornar um resultado.

Cada modelo que foi treinado recebe um nome próprio e uma versão, como o Claude 2.0, o GPT-4, Claude Opus 4.6, Gemini 3.1 Pro, etc. Cada um tem suas próprias características, capacidades e limitações. Alguns são melhores para entender o contexto de uma conversa, outros são mais rápidos ou têm um limite maior de tokens.

Quando usamos um serviço de IA, como ChatGPT, Claude, Gemini, etc., estamos na verdade usando uma interface amigável que interage com um LLM por trás dos panos. O LLM é o que realmente processa a informação e gera a resposta, enquanto a interface é o que torna isso acessível e fácil de usar para nós.

Embora muitas vezes tratemos tudo como “IA”, é importante diferenciar:

- LLMs → focados em texto
- Modelos de imagem → geração de imagens (Text-to-Image)
- Modelos de áudio → síntese de voz (TTS)
- Modelos multimodais → combinam texto, imagem, áudio, etc.

Também é possível encadear vários LLMs para criar um sistema mais complexo, onde cada modelo é responsável por uma parte do processo. Por exemplo, um LLM pode ser usado para entender o contexto de uma pergunta, enquanto outro pode ser especializado em gerar a resposta.

```md
Texto -> LLM (interpretação) -> LLM (geração) -> TTS (Modelo de áudio) -> Áudio
```

Ferramentas como o [LangChain](https://www.langchain.com/) ajudam a estruturar esse tipo de fluxo.


### Tokens
São as unidades básicas que a IA usa para ler/responder. Em vez de letras ou palavras inteiras, a IA quebra o texto em pedaços (como sílabas ou partes de palavras) através de um processo chamado tokenização.

Por exemplo, a palavra "casa" pode ser dividida em tokens como "ca" e "sa" e cada token é transformado em números para que a IA possa entender, processar e responder.

```md
casa -> [ca, sa] -> [123, 456]
```

A maioria dos LLMs tem um limite de tokens que podem processar de uma vez. Se o prompt ou a resposta exceder esse limite, a IA pode não conseguir processar tudo, o que pode levar a respostas incompletas ou erros. Existem planos pagos que permitem aumentar esse limite.

### Prompt
É a instrução, pergunta, input ou comando que você envia para a IA. Essa etapa é muito importante porque a qualidade da resposta depende muito de como o prompt é formulado. Se você quiser uma resposta mais curta, clara e objetiva, é importante ser específico no prompt.

Também é importante fornecer qualquer informação que seja relevante para a IA entender o contexto e responder de forma adequada.

Por exemplo, você pode pedir para a IA responder uma lista de cidades num formado JSON e fornecer um exemplo de como o json deve ser estruturado. Isso ajuda a IA a entender exatamente o que você quer e a formatar a resposta corretamente.

Exemplo: _"Me dê uma lista de 5 cidades brasileiras com mais de 1 milhão de habitantes, formatada em JSON, seguindo este exemplo: { 'cidade': 'São Paulo', 'população': 12300000 }"._

Resposta:
```json
[
  { "cidade": "São Paulo", "população": 12300000 },
  { "cidade": "Rio de Janeiro", "população": 6748000 },
  { "cidade": "Brasília", "população": 3055000 },
  { "cidade": "Salvador", "população": 2887000 },
  { "cidade": "Fortaleza", "população": 2687000 }
]
```

É muito importante fornecer um contexto adequado para a IA. Recentemente pedi pra ela investigar um problema na minha aplicação, ela estava lendo milhares de arquivos na pasta node_modules, levou vários minutos e acabou consumindo todos os meus [tokens](#tokens) disponíveis. Quando meus tokens renovaram, pedi pra ela investigar meu problema e consultar a documentação da ferramenta que eu utilizava. Resultado: ela resolveu o problema em alguns segundos.

### Embeddings
Embeddings são representações numéricas do significado de palavras ou textos. Isso permite que a IA entenda que "casa" e "lar" são conceitos próximos, mesmo sendo palavras escritas de forma diferente. Palavras com significados parecidos (como "cachorro" e "pet") ficam numericamente próximas, o que ajuda a IA a entender seu contexto numa frase.

Esses números são usados para comparar palavras e encontrar relações entre elas, o que é fundamental para a IA responder de forma relevante e precisa.

Uma IA não sabe de todas as coisas antes de responder, o que ela faz é identificar padrões e prever a próxima palavra com base no que já foi dito e no que ela aprendeu durante o seu treinamento.

Se a pergunta for sobre um assunto que ela não conhece, ela pode acabar inventando uma resposta (chamado de "alucinação"). Para evitar isso, é possível usar técnicas como RAG para fornecer informações reais e garantir respostas mais precisas.

### RAG (Retrieval-Augmented Generation)
Como já explicado em [LLM](#llm-(grande-modelo-de-linguagem)), a IA é treinada com uma grande quantidade de dados mas todo esse conhecimento tem uma data de validade. É como se a LLM estivesse presa no tempo. Ela não tem acesso a informações que aconteceram após a coleta desses dados ou a dados que não estavam presentes durante o treinamento.

Para resolver esse problema, é utilizado a técnica RAG (Retrieval-Augmented Generation), que permite à IA consultar fontes externas, como seus documentos ou manuais de uma empresa, antes de responder. Isso evita que ela invente informações e garante respostas baseadas em fatos reais.

### MCP (Model Context Protocol)
Assim como RAG é uma técnica para melhorar a precisão das respostas, o MCP é um protocolo que padroniza a forma como a IA se conecta a diferentes fontes de dados, aplicativos e interagem com eles.

É como uma ponte entre a IA e o mundo externo, permitindo que ela acesse informações em tempo real, como dados de um banco de dados, resultados de uma pesquisa na web ou até mesmo interagir com outros aplicativos e serviços, como um calendário para marcar uma reunião ou um sistema de e-mail para enviar uma mensagem.

Veja a lista de [MCPs populares do Claude](https://code.claude.com/docs/en/mcp#popular-mcp-servers).


### AI Agent (Agente de IA)
Em uma conversa, a AI recebe uma pergunta (input) e devolve uma resposta (output). Mas ela não tem capacidade de fazer nada além disso. Já um agente de IA é um sistema mais avançado que tem a capacidade de realizar tarefas específicas de forma autônoma. Ele é projetado para entender um objetivo ou tarefa e tomar as ações necessárias para alcançá-lo, sem a necessidade de intervenção humana constante.

Por exemplo, se você pedir para um agente de IA _"Marque uma reunião com o João amanhã às 10h"_, ele pode acessar seu calendário, verificar a disponibilidade do João, enviar um convite e confirmar a reunião, tudo isso sem que você precise fazer nada além de dar o comando inicial.

Apesar de ser incrível, dar acesso e controle a um agente de IA também é perigoso. Ele pode apagar arquivos importantes, enviar mensagens erradas ou até mesmo causar danos maiores se não for programado e monitorado corretamente. Por isso, é fundamental ter cuidado ao usar agentes de IA e garantir que eles sejam configurados com as permissões adequadas e que haja supervisão humana para evitar problemas.

Exemplos de Agentes de IA: [Claude Code](https://www.claude.com/), [OpenCode](https://opencode.ai/), [Copilot](https://azure.microsoft.com/pt-br/products/github/copilot), [AutoGPT](https://agpt.co/), [BabyAGI](https://babyagi.org/), [AgentGPT](https://agentgpt.reworkd.ai/), etc. Todos eles são sistemas que utilizam LLMs para realizar tarefas específicas de forma autônoma, mas cada um tem suas próprias características e funcionalidades.


### Skills
Skills são instruções ou capacidades reutilizáveis que damos a um agente para que ele se torne um especialista ao realizar alguma tarefa. Podemos especificar como e quando um agente pode e deve pesquisar na web, fazer cálculos matemáticos, gerar imagens, acessar um banco de dados específico, interagir com um aplicativo, seguir um padrão específico, entre outras coisas.

Sempre que um agente precisar realizar uma tarefa relacionada a essa habilidade, essa informação será carregada automaticamente e não precisamos repetir a mesma instrução toda vez.

Existe uma [coleção de skills](https://skills.sh/) relacionadas a programação, basta instalá-las para utiliza-las.

```md
.skills/
  /summarize-text/
    SKILL.md
```
Formato da uma skill.md:
```md
---
name: summarize-text
description: Resume qualquer texto fornecido de forma clara e concisa. Use quando o usuário pedir resumos ou ao lidar com conteúdos longos.
---

# Skill: Resumir Texto

## Instruções

- Sempre gere um resumo conciso.
- Mantenha apenas as ideias principais.
- Evite detalhes desnecessários.
- Use bullet points (tópicos) quando apropriado.
- Mantenha o significado original.

## Formato de saída

- Parágrafo curto OU
- Bullet points (se o conteúdo for complexo)

## Exemplos

Input:
"JavaScript é uma linguagem de programação usada para desenvolvimento web. Ela permite que desenvolvedores criem elementos interativos em sites..."

Output:
- JavaScript é usado para desenvolvimento web
- Permite recursos interativos em sites
```

### Subagents
Assim como skills, subagents são instruções para serem seguidas ao realizar certa tarefa pelo agente principal. Por padrão, o agente principal realiza pequenas tarefas de cada vez. Com subagentes, ele pode delegar essas tarefas para serem executadas em paralelo pelos subagentes ou combiná-las.

#### Exemplo de subagentes
```md
---
name: RestaurantsFinder
description: Look for specific restaurants considering its reviews and popularity given a location.
---
```
```md
---
name: PlacesCloseToMe
description: Return the only the list of places close to me giving a location and a range distance. Return the places name, their popularity and distance.
---
```

#### Comando:
_Me dê uma lista de 10 restaurantes japoneses perto de mim, estou localizado na praça da Sé em São Paulo. A distância máxima é de 30 kilometros. Use os subagents RestaurantsFinder e PlacesCloseToMe._

#### Resposta:
```md
Aqui estão os 10 restaurantes japoneses mais próximos de você na Praça da Sé, dentro de 30km:

  ┌─────┬────────────────────────┬──────────────────────────┬───────────┐
  │  #  │      Restaurante       │        Avaliação         │ Distância │
  ├─────┼────────────────────────┼──────────────────────────┼───────────┤
  │ 1   │ Izakaya Issa           │ 4.5/5                    │ ~1.5 km   │
  ├─────┼────────────────────────┼──────────────────────────┼───────────┤
  │ 2   │ Lamen Kazu             │ 4.4/5 (1.043 avaliações) │ ~1.8 km   │
  ├─────┼────────────────────────┼──────────────────────────┼───────────┤
  │ 3   │ Momo Lamen House       │ 4.3/5 (518 avaliações)   │ ~1.8 km   │
  ├─────┼────────────────────────┼──────────────────────────┼───────────┤
  │ 4   │ Mugui                  │ 4.5/5 (294 avaliações)   │ ~1.9 km   │
  ├─────┼────────────────────────┼──────────────────────────┼───────────┤
  │ 5   │ Restaurante Porque Sim │ 4.5/5 (701 avaliações)   │ ~1.9 km   │
  ├─────┼────────────────────────┼──────────────────────────┼───────────┤
  │ 6   │ Sushi Kenzo            │ 4.4/5                    │ ~1.9 km   │
  ├─────┼────────────────────────┼──────────────────────────┼───────────┤
  │ 7   │ Sushi Isao             │ 4.5/5 (649 avaliações)   │ ~2.0 km   │
  ├─────┼────────────────────────┼──────────────────────────┼───────────┤
  │ 8   │ Tanka Restaurante      │ 4.5/5 (1.171 avaliações) │ ~2.0 km   │
  ├─────┼────────────────────────┼──────────────────────────┼───────────┤
  │ 9   │ Jojo Ramen             │ 4.4/5                    │ ~3.5 km   │
  ├─────┼────────────────────────┼──────────────────────────┼───────────┤
  │ 10  │ Djapa Moema            │ 4.8/5 (7.212 avaliações) │ ~8.0 km   │
  └─────┴────────────────────────┴──────────────────────────┴───────────┘

Os 8 primeiros ficam no bairro da Liberdade (bairro japonês de SP), a poucos minutos a pé. O destaque por avaliação é o Djapa Moema (4.8/5 com mais de 7 mil avaliações), apesar de ser o mais distante da lista.
  
```

### SDD (Spec Driven Development)
SDD é um documento com todos os detalhes, regras e especificações do seu projeto, geralmente é a primeira coisa a ser feita antes de começar um projeto. Assim como o [Prompt](#prompt), é muito importante você gastar mais atenção e tempo nessa etapa para dar toda a informação e guiar a IA até o resultado que você espera durante o desenvolvimento do software. No SDD você especifica a motivação, seu objetivo, as tecnologias utilizadas, as regras de negócio, entidades e relação entre elas. Quanto mais informações e contexto, melhor será o resultado da IA. Inclusive você pode usar a IA para escrever um bom SDR, como https://kiro.dev.

## Conclusão

A verdade é que IA está mudando a forma como todos nós trabalhamos e muito rápido. Muitos ainda relutam em adotar o uso da IA em seu dia-a-dia ou tem dificuldade em entender todos esses novos conceitos, ferramentas e siglas que surgem toda semana. Eu era um deles. Não sabia como e por onde começar, comprei cursos, assisti vídeos, li artigos mas o que realmente me ensinou foi botar a mão na massa e começar a usar a IA para programar. Sem essa de vibe-coding. Muita coisa fez sentido pra mim - apesar da maioria dos modelos e ferramentas serem pagas.

IA não é futuro; ela já está entre nós hoje. Há um receio de que ela tome nosso trabalho, e há razões para isso. Mas ao mesmo tempo, a IA pode ser uma grande aliada no nosso dia-a-dia, em automatizar algumas tarefas, vasculhar e alterar vários arquivos de uma vez, como um grande parceiro de pair programming.


Desenvolvimento com IA: conceitos que todo dev precisa entender


Hoje em dia é difícil pensar numa atividade que fazemos que não dependa da Internet. Ela nos permite fazer compras no mercado, pagar boletos, assistir séries facilmente, através de poucos cliques. Mas, veja bem, quando digo “nos permite”, estou pensando na minha situação, sem nenhuma dificuldade ou restrição em usar a internet. Infelizmente, a realidade de milhões de pessoas não é a mesma.

Nesse blog post estarei falando sobre os seguintes temas:

- [WAI-ARIA](#wai-aria)
- [HTML Semântico](#html-semantico)
- [Imagens](#imagens)
- [Cores](#cores)
- [Como começar a desenvolver com acessibilidade?](#como-comecar-a-desenvolver-com-acessibilidade)
- [Outras boas práticas](#outras-boas-praticas)

Um levantamento publicado, recentemente, pelo [Movimento Web Para Todos](https://mwpt.com.br/) e pela plataforma [BigDataCorp](https://bigdatacorp.com.br/) aponta que [apenas 0,74% dos sites brasileiros são acessíveis a pessoas com deficiência](https://revistagalileu.globo.com/Tecnologia/noticia/2020/05/apenas-074-dos-sites-brasileiros-sao-acessiveis-pessoas-com-deficiencia.html).

E esse número não deve melhorar tão cedo, já que a legislação brasileira não define quais critérios de acessibilidade um site deveria atender, enquanto em Israel [você pode ser processado](https://www.haaretz.com/.premium-annoying-web-accessibility-rules-1.5290156) se o seu site não for acessível.

Mas, por onde podemos começar a pensar em acessibilidade?

## WAI-ARIA
Pra falar de acessibilidade na web precisamos falar de WAI-ARIA, diretrizes criadas pela [W3C](https://www.w3.org/), a organização internacional que cuida dos padrões da Internet. Segundo a [documentação oficial](https://www.w3.org/WAI/standards-guidelines/aria/), WAI-ARIA (Web Accessibility Initiative — Accessible Rich Internet Applications) define maneiras de tornar o conteúdo de sites mais acessíveis para pessoas com deficiências ou que utilizam algum assistente de navegação, como leitor de tela e teclado.

Elas devem ser capazes de interagir com elementos da página como botões, formulários, drag-and-drop, calendários, listas de drop-down, submenus, etc.

Resumindo, ARIA possui 3 categorias: *roles, estados e propriedades*.

### Roles
Podemos usar role para definir a natureza de um elemento, como também informar um grupo de elementos, regiões, estrutura da página, ou alertas.

Se você utilizar as tags semânticamente corretas do HTML, você pode não precisar definir as roles. As tags div ou span são as únicas que são genéricas e não possuem significado semântico, por isso, talvez você precise definir uma role quando utiliza-las pra algo importante.

Por exemplo, podemos criar um link válido usando a tag span e role dessa forma com HTML, CSS e JS:

```html
<span
  data-href="https://medium.com"
  tabindex="0"
  role="link">
  Link com span
</span>
```

```css
span[role="link"] {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}
```

```js
const spanElem = document.querySelector('span');
const navigateLink = (e) => {
  if (e.type === 'click' || e.key === 'Enter') {
    const ref = e.target != null ? e.target : e.srcElement;
    if (ref) {
      window.open(ref.getAttribute('data-href'), '_blank');
    }
  }
}

spanElem.addEventListener('click', navigateLink);
spanElem.addEventListener('keydown', navigateLink);
```

Ou, simplesmente usar a tag a:

```html
<a href="https://medium.com" target="_blank">Link com a</a>
```

### Estados e Propriedades
Através de estados e propriedades é possível indicar o estado de um elemento. Se ele está checado, selecionado, desabilitado, colapsado, oculto, aberto. Se é arrastável, clicável. Qual a ação de um botão sem texto, etc.

Para definir um modal:
```html
<div role="dialog" aria-modal="true">
  // Conteúdo
</div>
```

Para informar a ação de um botão sem texto:
```html
<button aria-label="Fechar">x</button>
```

Para definir um Slider:

```html
<div
  role="slider"
  aria-valuenow="4"
  aria-valuemin="1"
  aria-valuemax="10" />
```

É importante dizer que ARIA apenas fornece informações para a API de acessibilidade do navegador e não afeta o conteúdo da página.

Existem inúmeras outras opções, todas podem ser consultadas na [documentação oficial](https://www.w3.org/WAI/standards-guidelines/aria/) ou resumido no [site da mozilla](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques).

## HTML Semântico
O propósito do HTML (Linguagem de marcação de hipertexto) é dar significado para o conteúdo da página através de tags. Atualmente, existem quase 100 tags, eu sei que é muita coisa mas você deve conhecer no mínimo as mais usadas.

- `a` para link.
- `p` para parágrafo.
- `button` para botão.
- `ul`, `ol`, `li` para lista.
- `h1`, `h2`, `h3`, `h4`, `h5`, `h6` para títulos.
- `form`, `label`, `input` para formulários.
- `table`, `thead`, `tbody`, `td`, `tr` para tabelas.
- `header` para o cabeçalho.
- `nav` para navegação.
- `footer` para o rodapé.

Como já mencionado acima, div e span são tags genéricas e não tem nenhum significado semântico no HTML. Se for algo importante, você deve utilizar ARIA para dar sentido a elas.

Tabela semelhante a tabela periódica com todas as tags do HTML e sua categoria.

<figure>

![Tabela com todas tags do HTML](./images/periodic-tags.webp)
<figcaption>Tabela com todas tags do HTML
</figcaption>
</figure>


## Imagens
Grande parte da internet hoje em dia são imagens, sejam propagandas, anúncios, memes, selfies e sem a propriedade alt definida, todas elas se tornam sem sentido para um leitor de tela.

A propriedade alt na tag img deve receber um texto descrevendo o conteúdo da imagem. Quanto mais descritivo for, melhor para acessibilidade e até para o SEO.

A descrição do alt também é exibido caso o link da imagem esteja quebrado.

### Exemplo do uso da propriedade alt

Veja a foto desse belo hot dog:

![Hot dog num prato com mostarda e pure de batata](./images/hotdog.webp)

Está tudo bem descrevê-la assim:

```html
<img src="hotdog.png" alt="hot dog" />
```

Melhor ainda seria descrevê-la com mais detalhes, assim:

```html 
<img src="hotdog.png" alt="Hot dog num prato com mostarda e pure de batata"/>
```

Um péssimo uso da propriedade alt seria assim, como um spam, imagine um leitor de tela lendo isso:

```html
<img src="hotdog.png" alt="hot dog hotdog comida fastfood receita almoço junk food" />
```

## Cores
É comum designers se basearem em cores para indicar estados; verde quando está tudo certo, vermelho quando tem algum erro, laranja para um alerta, etc. Mas, para pessoas daltônicas é bem difícil distinguir essas cores. O auxílio de labels, ícones, texturas também devem ser utilizados nesse momento.

<figure>

![Hot dog](./images/trello.gif)
<figcaption>Solução do Trello para daltônicos</figcaption>
</figure>

## Como começar a desenvolver com acessibilidade?
Desenvolver pensando em acessibilidade pode parecer inicialmente complicado, mas ao longo do tempo isso tende a se tornar natural. Conforme você aprende a usar as tags semanticamente corretas do HTML, descobre a utilidade de outras ou tenta navegar pelo seu site através do teclado.

Testar a acessibilidade enquanto desenvolvemos deve ser tão importante quanto testar o suporte em diferentes navegadores. Por isso, segue alguns links que podem ajudar.

### ChromeVox
[ChromeVox](http://www.chromevox.com/) é um leitor de tela gratuito e está disponível através de uma extensão do Chrome que você pode instalar [por aqui](https://chrome.google.com/webstore/detail/chromevox-classic-extensi/kgejglhpjiefppelpmljglcjbhoiplfn?hl=pt-BR). Ele lê o conteúdo do seu site conforme você navega com o teclado. (Para desativa-lo/ativa-lo, basta clicar cmd + ctrl + A + A no iOS).

### Lighthouse
Você pode auditar a acessibilidade do seu site com a ferramenta [Lighthouse](https://developers.google.com/web/tools/lighthouse) da Google. Ela faz parte do Chrome em Ferramentas do Desenvolvedor e te dá uma nota de 0 a 100 em questão de perfomance, acessibilidade, boas práticas e SEO.

### React + ESLint
Pra quem valida o código no React com o ESLint, tem o plugin [eslint-plugin-jsx-a11y](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y) que também procura por problemas de acessibilidade no JSX.

### WCAG Checklist
No site [a11yproject](https://www.a11yproject.com/) tem um checklist que segue as diretrizes do [WCAG](https://guia-wcag.com/) (The Web Content Accessibility Guidelines), que é um padrão de acessibilidade compartilhado entre indivíduos, organizações e governos. Ele é bem organizado entre categorias de conteúdo. Você pode acessa-lo [por aqui](https://www.a11yproject.com/checklist/).

## Outras boas práticas

### Zoom
Não desabilite o zoom na página através da metatag viewport do HTML. Existem inúmeros motivos pelos quais usuários podem querer aplicar o zoom na tela, como ver um detalhe numa imagem ou ler uma fonte que está pequena.

### Foco
Não desabilite a borda dos elementos com foco através da propriedade outline: none no CSS. É dessa forma que usuários que navegam pelo teclado conseguem saber aonde o pointeiro do mouse estaria.

### Conclusão
Acessibilidade não é uma funcionalidade extra em um app. Como desenvolvedores, devemos construir uma internet melhor e mais inclusiva para qualquer pessoa, independente de região, dispositivo, região e/ou deficiências.

Acessibilidade não deve ser apenas uma preocupação do desenvolvedor. Designers, gerentes de produtos, publicitários e todos envolvidos na criação de uma página também devem pensar na importância de acessibilidade na web.

Somente juntos podemos criar uma internet melhor, acessível, inclusiva e sem barreira para todos.

Tornando a internet acessível

Tailwind surgiu em 2017, sobreviveu o hype das novas tecnologias e hoje está presente em muitos projetos e na instalação padrão de frameworks, como o NextJS. TailwindCSS torna a criação de componentes UI mais simples, rápido e agradável.

![distracted boyfriend meme](https://pbs.twimg.com/media/ELYsGXAW4AIsTRk.jpg)

Eu me tornei um evangelizador de Tailwind, por isso gostaria compartilhar as principais funcionalidades e como utilizo no meu dia a dia.

Nesse blog post estarei falando sobre os seguintes temas:

- [Como TailwindCSS Funciona](#como-tailwindcss-funciona)
- [Classes utilitárias](#classes-utilitarias)
- [Customizando um tema](#customizando-um-tema)
- [Propriedades customizadas](#propriedades-customizadas)
- [Usando Media Queries](#usando-media-queries)
- [Hover, actived, disabled e outros estados](#hover-actived-disabled-e-outros-estados)
- [Usando !important](#usando-important)
- [Usando Valores Negativos](#usando-valores-negativos)
- [Acessando primeiro e último elemento](#acessando-primeiro-e-ultimo-elemento)
- [Elementos Aninhados](#elementos-aninhados)
- [Peer](#peer)
- [Melhorando a leitura com @apply](#melhorando-a-leitura-com-apply)
- [Adicionando Prefixo](#adicionando-prefixo)
- [Playground](#playground)

Para mais informações sobre instalação, configuração, por favor, verifque a [documentação oficial de Tailwind](https://tailwindcss.com/).

### Como TailwindCSS Funciona
Tailwin utiliza classes do html para aplicar estilos do CSS. Por exemplo, podemos definir a cor, tamanho e line-height de um texto da seguinte maneira com Tailwind.

```html
<p class="text-red-500 text-base">Hello, World!</p>
```

Enquanto que com CSS puro, teriamos que criar uma classe e usa-la no elemento.

```css
.text {
    color: red;
    font-size: 12px;
    line-height: 18px;
}
```

```html
<p class="text">Hello, World!</p>
```

E com styled-components, teriamos que exportar um componente, importa-lo e usa-lo. Normalmente esse elemento estaria em um arquivo separado.

```js
export const Text = styled.p`
    color: red;
    font-size: 12px;
    line-height: 18px;
`;
```

```jsx
import * as Styles from './styles.js';
// ...
<Styles.Text>Hello, World!</Styles.Text>
```

Como você pode ver, podemos ter o mesmo resultado escrevendo muito menos código com tailwind.

### Classes Utilitárias
No começo leva um tempo para decorar as classes mas elas seguem um padrão e com o tempo, se torna natural. Na documentação oficial tem a lista de todas as classes mas as mais usadas são:

- `w-x` - Width
- `h-x` - Height
- `p-x` - Padding
- `m-x` - Margin
- `mb-x` - Margin-bottom
- `mt-x` - Margin-top
- `ml-x` - Margin-left
- `mr-x` - Margin-right
- `px-x` - Padding-left & padding-right
- `my-x` - Margin-top & margin-bottom
- `text-x` - Font-size & color
- `leading-x` - Line-height
- `bg-x` - Background-color
- `rounded` - Rorder-radius
- `flex | block | hidden | grid` - display: flex | block | none | grid

[Leia mais na documentação oficial](https://tailwindcss.com/docs/utility-first)

Eu recomendo muito a extensão do [VSCode Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) que sugere e mostra os valores de todas as classes enquanto você digita.

![VSCode Tailwind CSS IntelliSense extension](/images/autocomplete.png)

### Customizando um tema
Tailwind vem com um tema padrão, mas é possível customizar esse tema para atender as necessidades do seu projeto.

Para isso, basta criar um arquivo `tailwind.config.js` na raiz do projeto e definir as propriedades que você deseja customizar.

```js
module.exports = {
  theme: {
    extend: {
      colors: {
        'blue': '#1fb6ff',
        'green': '#13ce66',
        'gray-dark': '#273444',
      },
      spacing: {
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  }
}
```

[Leia na documentação oficial](https://tailwindcss.com/docs/theme)

### Propriedades Customizadas
O tema do Tailwind tem uma variação muito grande propriedades e estilos, elas provavelmente atenderam as especificações do design.

Mas se por acaso você precisar de uma propriedade que não exista no seu tema, você pode definir um valor diferente usando `-[x]`, por exemplo.

```html
<p class="text-[red] text-[100px] w-[50%]">Hello, World!</p>
```
Para propriedas com espaço, você pode usar underline `_` para separar os valores.

```html
<p class="w-[calc(100%_+_10px)] shadow-[0_35px_60px_-15px_#333]">Hello, World!</p>
```

[Leia mais na documentação oficial](https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values)

### Usando Media Queries
Para utilizar breakpoints, vc pode usar os prefixos `sm:`, `md:`, `lg:` e `xl:`.

```html
<p class="text-red-500 sm:text-blue-500 md:text-green-500 lg:text-purple-500 xl:text-yellow-500">Hello, World!</p>
```

Para alterar os tamanhos dos breakpoints, basta alterar a propriedade `screens` no arquivo `tailwind.config.js`.

```js
module.exports = {
  theme: {
    screens: {
      'sm': '576px',
      // => @media (min-width: 576px) { ... }

      'md': '960px',
      // => @media (min-width: 960px) { ... }

      'lg': '1440px',
      // => @media (min-width: 1440px) { ... }
    },
  }
}
```

[Leia na documentação oficial](https://tailwindcss.com/docs/screens)

### Hover, actived, disabled e outros estados
Tailwind também utiliza prefixos para estilizar um elemento, dependendo do seu estado, como `hover:`, `focus:`, `active:` e `disabled:`.

```html
<button class="bg-blue-500 hover:bg-green-500 disabled:bg-slate-600">Click here</button>
```

[Leia mais na documentação oficial](https://tailwindcss.com/docs/hover-focus-and-other-states)

### Usando !important
Para usar a propriedade `!important` no CSS, basta adicionar o prefixo `!` antes da classe.

```html
<p class="!mb-0">Hello, World</p> 
```

[Leia mais na documentação oficial](https://tailwindcss.com/docs/configuration#important-modifier)

### Usando Valores Negativos
Para usar valores negativos, basta usar o prefixo `-` antes da classe.

```html
<p class="-mb-4">Hello, World</p> 
```

[Leia mais na documentação oficial](https://tailwindcss.com/docs/margin#using-negative-values)

### Acessando Primeiro e Último Elemento
Ao invés de usar os seletores `:last-of-type`, `:first-of-type` para customizar o primeiro ou último de um grupo de elementos irmãos hierarquicos, basta usar os prefixos `first:` e `last:`.

```html
<p class="text-red-600 last:text-blue-600">...<p>
<p class="text-red-600 last:text-blue-600">...<p>
<p class="text-red-600 last:text-blue-600">...<p>
```

Isso é muito útil em loops.

```html
<ul>
    {#each people as person}
       <li class="mb-10 last:mb-0">...<li>
    {/each}
<ul>
```
[Leia mais na documentação oficial](https://tailwindcss.com/docs/hover-focus-and-other-states#first-last-odd-and-even)

### Elementos Aninhados
Para aplicar o estilo em um elemento filho, basta usar o prefixo `&>` dentro de colchetes.

```html
<div class="text-blue-700 hover:[&>.text]:text-red-700 ">
    <p>I'll not be red on hover.</p>
    <p class="text">I'll be red on hover.</p>
</div>
```

[Leia mais na documentação oficial](https://tailwindcss.com/blog/tailwindcss-v3-1#arbitrary-values-but-for-variants)

### Peer
Para estilizar um elemento dependendo do estado do seu irmão hierarquico, basta usar a classe e prefixo `peer`.

```html
<input type="email" class="peer"/>
<p class="invisible peer-invalid:visible text-pink-600">
    Please provide a valid email address.
</p>
```

[Leia mais na documentação oficial](https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-sibling-state)

### Melhorando a leitura com @apply

Dizem que uma desvantagem do tailwind é que dificuldade a leitura do código, adicionando tantas classes no html.

```html
<p class="text-base text-gray-800 mb-3 last:mb-0">Text 1</p>
<p class="text-base text-gray-800 mb-3 last:mb-0">Text 2</p>
<p class="text-base text-gray-800 mb-3 last:mb-0">Text 3</p>
<p class="text-base text-gray-800 mb-3 last:mb-0">Text 4</p>
```

Isso até é válido mas é possivel usar o `@apply` para agrupar as classes, reutiliza-las e deixar o código mais legível.


```css
.my-text-base {
    @apply text-base text-gray-800 mb-3 last:mb-0;
}
```

```html
<p class="my-text-base">Text 1</p>
<p class="my-text-base">Text 2</p>
<p class="my-text-base">Text 3</p>
<p class="my-text-base">Text 4</p>
```

[Leia mais na documentação oficial](https://tailwindcss.com/docs/reusing-styles)

### Adicionando Prefixo
Se você quiser adicionar tailwind em um projeto e evitar conflitos com outras classes, você pode adicionar um prefixo `tw-` para as classes do tailwind.

```js
module.exports = {
  prefix: 'tw-',
}
```

```html
<p class="tw-text-blue-400">Hello, World!</p>
```

[Leia mais na documentação oficial](https://tailwindcss.com/docs/configuration#prefix)


### Playground

Tailwind possui um playground onde você pode testar todas essas funcionalidades e todas as outras online. Basta acessar o link.

https://play.tailwindcss.com/

### Conclusão

Desde que comecei a trabalhar com tailwind, raramente precisei criar um novo arquivo CSS ou rescrever propriedades para estilizar um projeto.

Caso esse post não tenha te convencido a usar Tailwind, gostaria de compartilhar mais alguns pontos que considero importante.

- Tailwind CSS é leve e somente irá adicionar no bundle final as classes que você utilizar durante o desenvolvimento.
- Tailwind é fácil de configurar, customizar e começar a trabalhar em qualquer projeto web, seja React, Angular, Vue ou só HTML.
- TailwindCSS pode ser utilizado com outras soluções UI, como bibliotecas, pré processadores e CSS-in-JS.

Espero que você tenha gostado desse meu blog post. Caso tenha alguma dúvida, fique a vontade de me perguntar na sessão de comentários logo a baixo.

Desenvolvendo mais rápido com TailwindCSS 🍃


Responsividade é fundamental para qualquer website que queira oferecer o mínimo de boa experiência para o usuário.

E por anos temos usados media query no CSS para fazer esse trabalho, e ela funciona muito bem para ajustar os componentes dependendo do tamanho da tela.

Porém, media query tem uma limitação; ela apenas se baseia no tamanho da tela do usuário.

E se quisessemos nos basear no tamanho disponível do elemento pai?

Esse problema que a container query resolve. Nos permitir tratar componentes diferentemente dependendo do seu espaço disponível.

![alt](https://wd.imgix.net/image/HodOHWjMnbNw56hvNASHWSgZyAf2/Sw2dY4cpYjc8GBJVmCrK.png?auto=format&w=1600)

## Usando container query

Imagine a seguinda estrutura de HTML.

```HTML
<div class="grid">
    <div class="card">
      // ...
    </div>
    <div class="card">
      // ...
    </div>
    <div class="card">
      // ...
    </div>
</div>
```

Para utilizarmos container query nos elementos filhos de `.grid`, precisamos adicionar a propriedade `container-type: inline-size` nele.

```CSS
.grid {
 container-type: inline-size;
}
```

Além `inline-size`, também é possível usar `size` e `normal`.

Agora sim podemos estilizar o componente `.card` dependendo do tamanho do seu pai `.grid`, para isso basta utilizarmos `@container` como uma `@media query` normal.

```CSS
.card {
 width: 100%;
}

@container (min-width: 700px) {
  .card {
    width: 50%;
  }
}

@container (min-width: 1024px) {
  .card {
    width: 33%;
  }
}
```

Assim, o elemento `.card` terá width 100% por padrão, width 50% quando `.grid` tiver no mínimo 700px e width 33% se `.grid` tiver no minimo 1024px.

## Nested container queries

Também é possível ter container queries aninhados e adicionar um nome para cada pra ser consultado.

```HTML
<div class="content">
    <div class="grid">
        <p class="text">Text</p>
    </div>
</div>
```

```CSS
.content {
    content-name: content;
    container-type: inline-size;
}

.grid {
    content-name: grid;
    container-type: inline-size;
}

.text {
    font-size: 12px;
}

@container content (min-width: 320px) {
    .text {
        font-size: 14px;
    }
}

@container grid (min-width: 620px) {
    .text {
        font-size: 16px;
    }
}
```

O componente `.text` terá font-size 12px por padrão, font-size 14px quando `.content` tiver no mínimo 320px e font-size 16px quando `.grid` tiver no mínimo 620px.

## Unidade de Container Query

Container query também oferece novas unidades de medidas de CSS, assim como `px`, `%`, `vw`, `vh`. Todos ele se baseam no espaço disponível em relação ao elemento pai.

- `1cqw` - 1% da largura do query container.
- `1cqh` - 1% da altura do query container
- `1cqi` - 1% do tamanho inline do query container.
- `1cqb` - 1% do tamanho block do query container.
- `cqmin` - O menor tamanho entre `cqi` e `cqb`.
- `cqmax` - O maior tamanho entre `cqi` e `cqb`.

## Suporte

Container Query é suportado por boa parte dos navegadores modernos, então você já pode começar a utiliza-lo.

![alt](https://i.imgur.com/DtlVZpV.png)

Usando container queries


Pa ilustrar melhor o que é especificidade do CSS, antes de explicar eu gostaria de deixar uma pergunta, a resposta estará no final do post. Considerando o seguinte HTML e CSS, qual cor será aplicado?

```html
<p class="text" id="about-css" style="color:red">CSS is cool. Isn`t?</p>
```

```css
.text {
  color: blue;
}

#about-css {
  color: yellow;
}

html body p {
  color: green;
}

p.text#about-css {
  color: pink;
}
```

```
(A) A cor será red;
(B) A cor será blue;
(C) A cor será yellow;
(D) A cor será green;
(E) A cor será pink;
```

## O que é especificidade no CSS?

Especificidade do CSS é algo que todo desenvolvedor web já se deparou, mesmo que nunca tenha ouvido falar disso. Quem nunca adicionou um estilo no CSS, atualizou a página e... não funcionou. Daí você abre o inspetor, vê que seu estilo está lá, porém, está sendo sobrescrito por outra linha do CSS.

Isso é por causa da especificidade do CSS.

Nessas horas é tentador usar o _!important_ pra não gastar tempo investigando porque o estilo não está sendo aplicado. Funciona, mas tem outras maneiras de resolver isso ao entender a pontuação de cada seletor.

![meme - quando css não está sendo aplicado, o important é usado](https://i.redd.it/ezydutc7rcg31.jpg)

O navegador tem algumas regras pra calcular e decidir qual estilo do CSS aplicar, principalmente quando há estilos duplicados. Ele considera a especificidade do seletor que está sendo usado, como _classes, pseudo-classes, atributos, IDs e elementos_.

```css
.user #photo a {
  // ...
}
```

Cada um deles vale uma pontuação, é feita a soma e aplicado qual for maior.

## Como é feito o cálculo?

O navegador usa as seguintes pontuações:

- Cada elemento do HTML vale **0.0.0.1 ponto**. _(Ex. div ~ p = 0.0.0.2 pontos)_
- Cada classe, pseudo-classe e atributo vale **0.0.1.0 pontos**. _(Ex. .list .item:hover = 0.0.3.0 pontos)_
- Cada ID, vale **0.1.0.0 pontos**. _(Ex. #header #menu = 0.2.0.0 pontos)_
- Cada propriedade definida _inline_ no HTML vale **1.0.0.0 pontos**. _(Ex. color="red" = 1.0.0.0 pontos)_
- Podemos considerar que o _!important_ vale **1.0.0.0.0 pontos**.

Basta lembrar da ordem e formato da pontução:

```
maior pontuação >>>>>>>>>>>>>>>>>>>>>>>> menor pontuação
style inline > IDs > classes & pseudo-classes > elements
```

## Exemplos

- O seletor _header nav li.menu-item_ vale **1.3 pontos**, pois possui 3 elementos e 1 classe.

- O seletor _#user p > span_ value **1.0.2 pontos** pois possui 1 ID e 2 elementos.

- O seletor _body #menu .item:last-child_ vale **1.2.1 pontos**, pois possui 1 elemento 1 ID e 1 classes e 1 pseudo-classe.

Para te ajudar a entender, eu desenvolvi essa calculadora que conta a pontuação do seletor escrito.

<CSSSpecificityCounter />

Porém, existem algumas considerações:

- Caso os seletores possuem a mesma pontuação, o último que foi definido na folha de estilo será aplicado.
- Os pseudo seletores _:not_ e _\*_ não valem nenhum ponto.
- A soma não é decimal, por exemplo, 10 elementos não valem 1 classe, nesse caso sua pontuação seria **0.0.10**.

## Resposta da pergunta inicial

Como você deve ter entendido, o estilo inline vale mais do que qualquer combinação de classe, elementos e IDs, logo, a resposta é **A**.

Agora que você já sabe como funciona a especificidade do CSS, nada de adicionar _!important_ pra resolver um conflito de CSS, ein? Adicionar um estilo inline no HTML ou um ou mais ID's no seletor CSS deve resolver tão bem quanto.


Especificidade no CSS


React Hooks foram lançados há quase dois anos na versão 16.8 do React. Não é muito comum ver o uso de todos eles mas eles podem ser muito úteis para simplificar uma funcionalidade, melhorar a perfomance em nossa aplicação, então, eu gostaaria de explicar e dar alguns exeplos do uso de todos React Hooks.

Nesse artigo estarei passando por todos os React Hooks.

- useState
- useEffect
- useRef
- useContext
- useReducer
- useMemo
- useCallback
- useDebug
- useLayoutEffect

## useState

O mais simples e usado dos React Hooks, o _useState_ permite armazenar qualquer valor em um componente, como _string, object, array, boolean, number, null_.

Ele tem a mesma função do _this.state_ em um antigo Class Componentes do React.

Você pode definir seu valor passando um valor direto ou uma função que acessa seu valor atual e retornando um novo.

```jsx
import { useState } from 'react';

export default function Component() {
  const [counter, setCounter] = useState(0);
  return (
    <>
      <p>Clicks: {counter}</p>
      <button onClick={() => setCounter((prev) => ++prev)}>Increase 1</button>
    </>
  );
}
```

## useEffect

O _useEffect_ te permite executar uma função em alguns momento durante o lifecicle de um componente:

- Na primeira renderização do componente.
- Quando um valor observado é alterado.
- Quando o componente é desmontado.

Ele é similiar aos métodos _componentDidMount, componentDidUpdate e componentWillUnmount_ de um Class Componente.

```jsx
import { useEffect } from 'react';

export default function Component() {
  const fetchSomething = (params) => {};
  const onResizeScreenHandler = () => {};

  useEffect(() => {
    fetchSomething(filters);
  }, [filters]);

  useEffect(() => {
    document.addEventlistener('resize', onResizeScreenHandler);
    return () => document.removeEventlistener('resize', onResizeScreenHandler);
  }, []);
}
```

Para executar o _useEffect_ só uma vez, deixe o segundo parâmetro, o array vazio.

```jsx
useEffect(fn, []);
```

Para observar algum valor, adicione ele no array do segunddo parâmetro.

```jsx
useEffect(fn, [x]);
```

A função que você retorna irá ser chamada quando o componente for desmontado.

```jsx
useEffect(() => {
  return () => doSomething();
}, []);
```

## useRef

O _useRef_ te permite:

- Acessar um elemento do DOM.
- Armazenar um valor imutável durante o ciclo de vida do componente.

Seu valor é acessado por _.current_:

```jsx
const time = useRef(0);
console.log(time.current); // 0;
```

### Acessando um elemento do DOM.

```jsx
import { useRef, useEffect } from 'react';

export default function Component() {
  const textRef = useRef(null);
  useEffect(() => {
    if (textRef) {
      const elementWidth = textRef.current.offsetWidth;
    }
  }, [textRef]);

  return <p ref={textRef}>Exemplo de texto</p>;
}
```

### Delay effect

Você pode usar o _useRef_ pra criar um delay de _x_ segundos pra chamar uma função, por exemplo, quando usuário termina de digitar um campo para não sobrecarregar sua API com várias requisições cada vez que ele digita ou apaga uma letra.

```jsx
import { useRef, useEffect, useRef, useState } from 'react';

export default function Form() {
  const [text, setText] = useState('');
  const timeToCallSomething = useRef(null);

  const fetchSomething = () => {
    // Realiza alguma requisição http.
  };

  useEffect(() => {
    if (timeToCallSomething.current) {
      clearInterval(timeToCallSomething.current);
    }
    timeToCallSomething.current = setTimeout(fetchSomething, 1000);
    return () => clearInterval(timeToCallSomething.current);
  }, [text]);

  const onChangeHandler = ({ target: { value } }) => {
    setText(value);
  };

  return <input value={text} onChange={onChangeHandler} />;
}
```

### Passando ref via props

Se você quiser passar uma ref para utilizar num componente filho via props, você precisará usar o método _React.forwardRef_ do React no componente filho para receber essa ref como segundo parâmetro do componente.

```jsx
import { useRef, useEffect, forwardRef } from 'react';

export default function Parent() {
  const childRef = useRef(null);

  return <Text ref={childRef} />;
}

const Text = forwardRef((props, ref) => {
  return <p ref={ref}>Exemplo de texto</p>;
});
```

## useReducer

Esse hook é uma alternativa ao _useState_ e bem parecido com a idéia de _reducer_ do Redux. Ele observa um _type_ pré definido a retorna algum valor dependendo desse _type_.

```jsx
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return state + 1;
    case 'decrement':
      return state - 1;
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, 0);
  return (
    <>
      Count: {state}
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
    </>
  );
}
```

## useContext

O hook _useContext_ te permite armazenar e acessar algum valor em qualquer lugar dentro de sua hierarquia. Ele é muito parecido com o Redux, inclusive eu já escrevi um artigo mostrando [como substituir o Redux por React Hooks](https://www.sergiojunior.com.br/substituindo-redux-por-hooks).

Isso é útil quando você utiliza muito um valor e não quer ficar passando ele para os componentes filhos via props.

```jsx
// hooks/useUserContext.js
import { useContext, createContext } from 'react';

// Nosso contexto
const UserContext = createContext({ name: '' });

// Componente que recebe e atualiza o valor de name
export function UserContextProvider({ name, children }) {
  return <UserContext.Provider value={name}>{children}</UserContext.Provider>;
}

// Custom hook para pegar o valor atual
export default function useUserContext() {
  return useContext(UserContext);
}
```

```jsx
// YourAppTree.js
import { UserContextProvider } from '~hooks/useUserContext';

export default function App() {
  return (
    <UserContextProvider value="John">
      <YourAppTree />
    </UserContextProvider>
  );
}
```

```jsx
// App.js
import useUserContext from '~hooks/useUserContext';

export default function YourAppTree() {
  const userName = useUserContext(); // Inicialmente será '' e logo em seguida 'John'.
  return <p>Olá, {userName}</p>;
}
```

Os próximos React Hooks, _useMemo_ e _useCallback_, são mais para resolver problemas de perfomances no React.

## useMemo

Você pode utilizar o _useMemo_ para economizar tempo e processamento na execução de uma função complexa.

Imagine que você tenha uma função que receba alguns parâmetros e faça um cálculo usando esses parâmetros. O que o _useMemo_ faz é memorizar os parâmetros passados e o valor retornado da função. Assim, quando esses parâmetros forem iguais novamente, ele irá retornar o valor anterior, sem precisar calcula-lo.

```jsx
import { useMemo } from 'react';

export default function Component() {
  const value = useMemo(() => {
    // Faz algo complexo e demorado.
  }, [x, y]);
}
```

## useCallback

Antes de explicar o _useCallback_, gostaria de explicar um conceito importante no React.

React utiliza [Strict Equality Comparison](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Strict_equality) para comparar os valores das props, ou _[deps]_ de algum React Hook. Caso algum valor seja diferente, ele atualiza o componente, ou executa o React Hook.

E você e o Patrick devem saber que as coisas não são tão óbvias no javascript com valores não primitivos.

![alt](https://dkrn4sk0rn31v.cloudfront.net/2020/03/31110910/4skcofasa1p01.png)

Valores primitivos são do tipo _string, number e boolean_. Agora os _array, object_ e _function_ não são primitivos, portanto, se você compara-los, irá receber _false_:

```jsx
1 === 1; // true;
"batman" === "batman"; // true;
false === false; // true;

{} === {}; // false;
[] === []; // false;
() => {} === () => {}; //false;
```

Só retornará _true_ se tiver a mesma referência, como se estiver alocado numa variável:

```jsx
const fn = () => {};
fn === fn; // true;
```

Então se você passar uma função via props, o React irá atualiza-lo mesmo que as props não tenham mudado, simplesmente porque uma função é diferente de uma função, mesmo que seja ela mesma. complexo?

Então usamos o _useCallback_ pra criar uma referência única pra uma função e o React saber que é ela mesma e evitar atualizações desnecessárias.

Sua referência só será diferente caso seus parâmetros mudarem.

```jsx
import { useCallback } from 'react';

export default function Parent() {
  const onFetchAlwaysHandler = useCallback(() => {
    // Sua referência irá mudar quando a e b mudarem.
  }, [a, b]);

  const onFetchOnceHandler = useCallback(() => {
    // Sempre terá a mesma referência.
  }, []);

  return <Approvad onFetchHandler={onFetchHandler} />;
}
```

### React.memo

Você também pode usar _useCallback_ e _React.memo_ para evitar que todo componente filho seja rerenderizado desnecessariamente sempre que houver alguma atualização no componente pai.

```jsx
function List({ item, onSelect }) {
  return (
    <li>
      <button onClick={() => onSelect(item)}>Select {item}</button>
    </li>
  );
}

const MemorizedList = React.memo(List);

function App() {
  const onSelectHandler = useCallback((selectedItem) => {
    // Faz algo com selectedItem.
  }, []);

  return (
    <ul>
      {array.map((e) => (
        <MemorizedList item={e} onSelect={onSelectHandler} />
      ))}
    </ul>
  );
}
```

## useLayoutEffect

O hook _useLayoutEffect_ tem a mesma função do _useEffect_, porém, ela é executada assim que o navegador termina de fazer as alterações no DOM.

Você pode utilizar esse método para ler algum elemento do DOM ou realizar uma ação sincrona, assim que a página carrega.

```jsx
import { useState, useLayoutEffect } from 'react';

function Component() {
  const [loadedDOM, setLoadedDOM] = useState(false);

  useLayoutEffect(() => {
    setLoadedDOM(true);
    window.localstorage.getItem('...');
  }, []);
}
```

Eu sinceramente nunca usei esse hook num projeto.

### SSR

Se você estiver usando Server Side Render (NextJS), os hooks _useLayoutEffect_ e _useEffect_ não funcionaram, pois ele só são executados no client-side. Caso contrário, o React irá te avisa no console que você está usando no lado do server.

Você pode usa-los para interagir com o _localstorage_, por exemplo, que é uma feature somente do browser.

## useDebugValue

O _useDebugValue_ pode ser usado para exibir alguma label dentro de um custom hook. Ele é parecido com o _console.log_, porém, sua mensagem irá aparece no [React DevTools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi).

```jsx
import { useDebugValue, useState } from 'react';

function useUserStatus() {
  const [isLogged, setIsLogged] = useState(false);

  //...

  useDebugValue(isLogged ? 'Logged' : 'Not logged');

  return isLogged;
}
```

## useImperativeHandle

O hook _useImperativeHandle_ permite customizar o valor de uma _ref_ do elemento pai, através do componente filho. Ele deve ser utilizado junto com o _React.forwardRef_ no elemento filho, para receber a _ref_ do pai.

```jsx
import { useImperativeHandle, forwardRef, useEffect, useRef } from 'react';

const Input = forwardRef((props, parentRef) => {
  const childRef = useRef();
  const someMethod = () => 1;

  useImperativeHandle(parentRef, () => ({
    focusOnChildInput: () => childRef.current.focus(),
    callChildMethod: someMethod,
  }));
  return <input ref={childRef} />;
});

const Form = () => {
  const ref = useRef();
  useEffect(() => {
    if (ref) {
      ref.current?.callChildMethod?.(); // 1
      ref.current?.focusOnChildInput?.();
    }
  }, []);

  return (
    <form>
      <Input ref={ref} />
    </form>
  );
};
```

## Documentação

Caso você queira vêr mais detalhes e exemplos dos React Hooks, veja a [documetação oficial do React](https://pt-br.reactjs.org/docs/hooks-reference.html).


Explicando todos React Hook com exemplos


Em 2019 eu estava aprendendo os [React Hooks](https://pt-br.reactjs.org/docs/hooks-intro.html) e resolvi substituir o gerenciamento de estado de uma simples aplicação que eu estava fazendo de Redux com os Hooks. Eu não fazia idéia de como faria mas no final das contas deu super certo.

Consegui replicar os conceitos de reducers, actions, types, middleware, mapStateToProps e escrevi [um artigo no Medium](https://medium.com/reactbrasil/substituindo-o-redux-pelo-context-api-react-hooks-a70e995daa1d) mostrando como eu havia feito. Depois de divugar na cominidade, ele chegou até ser publicado na conta oficial do [React Brasil](https://medium.com/reactbrasil).

Eu fiquei muito feliz com o feedback do pessoal mas sentia que poderia refatorar aquele código que eu fiz há um ano atrás, torna-lo mais limpo e organizado, por isso, acabei reescrevendo o exemplo e o artigo, que se tornou esse que você está lendo agora.

Eu estou usando o mesmo exemplo de um simples contador e autenticação. Caso queira, você pode conferir [a demo](https://replacing-redux-to-hooks.netlify.com/) de como ficou e o [repositório](https://github.com/Sergioamjr/replacing-redux-to-hooks) com o código final.

### Vamos ao código

Primeiro, vamos criar os estados do nosso contador e autenticação na nossa store e também seus reducers, types e actions. Eles seguem basicamente o mesmo modelo do Redux, estou apenas usando o padrão Ducks pra manter tudo o que é relacionado no mesmo arquivo.

Você pode ler mais sobre esse padrão de organização [nesse link](https://github.com/erikras/ducks-modular-redux).

```js
//src/store/reducers/auth.js
export const authDefault = {
  auth: {
    isLogged: false,
    user: {},
  },
};

export const LOGIN = 'LOGIN';
export const LOGOUT = 'LOGOUT';

const authReducer = (state = authDefault, action) => {
  switch (action.type) {
    case LOGIN:
      return {
        auth: {
          ...state.auth,
          isLogged: true,
          user: action.payload,
        },
      };
    case LOGOUT:
      return {
        auth: {
          ...state.auth,
          isLogged: false,
          user: {},
        },
      };
    default:
      return state;
  }
};

export const loginAction = (user) => {
  return {
    type: LOGIN,
    payload: user,
  };
};

export const logoutAction = () => {
  return {
    type: LOGOUT,
  };
};

export default authReducer;
```

```js
//src/store/reducers/counter.js
export const counterDefault = {
  counter: 0,
};

export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';
export const RESET = 'RESET';

const counterReducer = (state = counterDefault, action) => {
  switch (action.type) {
    case INCREMENT:
      return {
        ...state,
        counter: state.counter + 1,
      };
    case DECREMENT:
      return {
        ...state,
        counter: state.counter - 1,
      };
    case RESET:
      return {
        counter: 0,
      };
    default:
      return state;
  }
};

export const incrementAction = () => {
  return {
    type: INCREMENT,
  };
};

export const decrementAction = () => {
  return {
    type: DECREMENT,
  };
};

export const resetAction = () => {
  return {
    type: RESET,
  };
};

export default counterReducer;
```

Agora vamos criar nossos custom hooks, o primeiro é o useCombinedReducers, responsável por retornar um array com os reducers e um objeto com o valor padrão da nossa store. Aqui iremos utilizar o hook useReducer.

```js
//src/store/hooks/useCombinedReducers.js
import { useReducer } from 'react';
import counterReducer, { counterDefault } from './../reducers/counter';
import authReducer, { authDefault } from './../reducers/auth';

const useCombinedReducers = () => {
  const [counterStore, counter] = useReducer(counterReducer, counterDefault);
  const [authStore, auth] = useReducer(authReducer, authDefault);

  return {
    store: { ...counterStore, ...authStore },
    reducers: [counter, auth],
  };
};

export default useCombinedReducers;
```

Sempre que formos adicionar um novo objeto na nossa store, precisaremos apenas alterar esse arquivo, importando seu reducer, seu valor padrão, passa-los para o useReducer e os retornar na função principal.

Essa foi a única alteração que eu fiz pro Redux, para tornar nosso componente Provider mais dinâmico e não precisar altera-lo novamente.

Nosso segundo custom hook é o useStore, responsável por criar e fornecer o context da aplicação através do hook useContext.

```js
//src/store/hooks/useStore.js
import { useContext, createContext } from 'react';
import { authDefault } from '../reducers/auth';
import { counterDefault } from '../reducers/counter';

export const defaultStore = {
  store: { ...authDefault, ...counterDefault },
  dispatch: () => {},
};

export const StoreContext = createContext(defaultStore);
export default () => {
  return useContext(storeContext);
};
```

Com esse custom hook também será possível acessar diretamente nossa store e o dispatch, além do componente Connect, que vamos criar logo em seguida.

O Connect injetará nossa store e dispatch nos nossos componentes. Aqui usamos componente StoreContext retornado no nosso hook useStore..

```js
//src/store/connect.js
import React from 'react';
import { StoreContext } from './hooks/useStore';

const returnPropsAsDefault = (store, props) => props;

const Connect =
  (mapStateToProps = returnPropsAsDefault) =>
  (Component) => {
    return function WrapConnect(props) {
      return (
        <StoreContext.Consumer>
          {({ dispatch, store }) => {
            const storeProps = mapStateToProps(store, props);
            return <Component {...storeProps} dispatch={dispatch} />;
          }}
        </StoreContext.Consumer>
      );
    };
  };

export default Connect;
```

Ele funcionará semelhante ao do Redux, recebendo o mapStateToProps e o componente que receberá a store.

Lembrando que o mapStateToProps é uma função que recebe a store e as props originais. Você é responsável por retornar a store inteira ou selecionar os objetos que precise, assim:

```js
function mapStateToProps(store, props) {
  return {
    ...store,
    ...props,
  };
}

export default Connect(mapStateToProps)(Component);
```

Caso o mapStateToProps não seja fornecido, sua função padrão returnPropsAsDefault retornará as props originais do componente.

O próximo componente será nosso Provider, que irá envolver nossa plataforma e tornar nossa store disponível dentro dela. Usamos o hook useCombinedReducers para receber o valor da store e um array com nossos reducers.

```js
//src/store/index.js
import React from 'react';
import useCombinedReducers from './hooks/useCombinedReducers';
import { StoreContext } from './hooks/useStore';

const Provider = ({ children }) => {
  const { store, reducers } = useCombinedReducers();

  const triggerDispatchs = (action) => {
    for (let i = 0; i < reducers.length; i++) {
      reducers[i](action);
    }
  };

  return (
    <StoreContext.Provider
      value={{
        store,
        dispatch: triggerDispatchs,
      }}
    >
      {children}
    </StoreContext.Provider>
  );
};

export default Provider;
```

Apenas explicando, o método triggerDispatchs faz um loop em nossos reducers, passando a action como parâmetro pra cada um deles.

Também podemos adicionar um middleware nesse arquivo, que servirá pra interceptar nossos dispatchs e fazer qualquer coisa que queremos a partir disso, como uma requisição, disparar outra action, etc.

Ele será basicamente assim.

```js
//src/store/middleware.js
import { LOGOUT } from './reducers/auth';
import { resetAction } from './reducers/counter';

export default (action) => (dispatch) => {
  if (action.type === LOGOUT) {
    dispatch(resetAction());
  }

  dispatch(action);
};
```

Ele é um closure que recebe a action e o dispatch, nesse caso estou disparando a action resetAction caso o type da action original seja LOGOUT.

Pra o utilizarmos precisamos alterar o arquivo do nosso Provider, importando nosso middleware, criando o método withMiddleware e substituir a atribuição do dispatch.

```js
//src/store/index.js
import React from 'react';
import useCombinedReducers from './hooks/useCombinedReducers';
import { StoreContext } from './hooks/useStore';
import middleware from './middleware';

const Provider = ({ children }) => {
  const { store, reducers } = useCombinedReducers();

  const triggerDispatchs = (action) => {
    for (let i = 0; i < reducers.length; i++) {
      reducers[i](action);
    }
  };

  const withMiddleware = (action) => {
    middleware(action)(triggerDispatchs);
  };

  return (
    <StoreContext.Provider
      value={{
        store,
        dispatch: withMiddleware,
      }}
    >
      {children}
    </StoreContext.Provider>
  );
};

export default Provider;
```

Agora só precisamos envolver nossa aplicação com o Provider, dessa maneira.

```js
//src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Provider from './store';

ReactDOM.render(
  <Provider>
    <App />
  </Provider>,
  document.getElementById('root')
);
```

Nesse ponto já temos tudo o que precisamos configurado para usar a store na nossa aplicação.

### Conectando nossos componentes

Vamos começar conectando nossos componentes Counter, Login e Header em nossa store.

```js
//src/container/counter.js
import React from 'react';
import ConnectTo from '../store/connect';
import { decrementAction, incrementAction } from '../store/reducers/counter';

const Counter = ({ dispatch, counter }) => {
  const decrementHandler = () => dispatch(decrementAction());
  const incrementHandler = () => dispatch(incrementAction());

  return (
    <div>
      <p>{counter}</p>
      <div>
        <button aria-label="Menos 1" onClick={decrementHandler}>
          -
        </button>
        <button aria-label="Mais 1" onClick={incrementHandler}>
          +
        </button>
      </div>
    </div>
  );
};

const mapStateToProps = ({ counter }, props) => {
  return {
    counter,
    ...props,
  };
};

export default ConnectTo(mapStateToProps)(Counter);
```

```js
//src/container/login.js
import React, { useState } from 'react';
import Connect from '../store/connect';
import { loginAction } from '../store/reducers/auth';

const Login = ({ dispatch }) => {
  const [name, setName] = useState('');
  const changeNameHandler = ({ target: { value } }) => setName(value);
  const onSubmitHandler = () => dispatch(loginAction(name));
  return (
    <div>
      <form>
        <p>
          Context + useState ={' '}
          <span role="img" aria-label="Coração">
            ❤️
          </span>
        </p>
        <input
          value={name}
          onChange={changeNameHandler}
          type="text"
          placeholder="Nome"
        />
        <button onClick={onSubmitHandler} disabled={!name}>
          Entrar
        </button>
      </form>
    </div>
  );
};

export default Connect()(Login);
```

```js
//src/container/header.js
import React from 'react';
import { logoutAction } from '../store/reducers/auth';
import useStore from '../store/hooks/useStore';

const Header = () => {
  const {
    dispatch,
    store: { auth },
  } = useStore();
  const logoutHandler = () => dispatch(logoutAction());
  return (
    <div>
      <div>
        <div>
          <p>
            Context + useState ={' '}
            <span role="img" aria-label="Coração">
              ❤️
            </span>
          </p>
          <div>
            <p>Olá, {auth.user}</p>
            <button onClick={logoutHandler}>Sair</button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Header;
```

Se você já usou Redux, deve ser familiar com o que temos aqui; o componente Connect injeta o dispatch e a store, também importamos as actions pra passarmos como seu parâmetro.

No nosso Header eu estou usando o custom hook useStore pra acessar a store e o dispatch, ao invés do Connect. Fique a vontade pra usar qual preferir.

Agora vamos colocar todos nossos componentes juntos e criar uma condição pra mostra-los, usando a autenticação da nossa store.

```js
//src/app.js
import React from 'react';
import Counter from './container/counter';
import Login from './container/login';
import Connect from './store/connect';
import Header from './container/header';

const App = ({ auth }) => {
  return (
    <div>
      <div>
        {auth.isLogged ? (
          <>
            <Header />
            <Counter />
          </>
        ) : (
          <Login />
        )}
      </div>
    </div>
  );
};

const mapStateToProps = ({ auth }, props) => {
  return {
    auth,
    ...props,
  };
};

export default Connect(mapStateToProps)(App);
```

É isso. Sua aplicação já deve estar funcionando com uma store criada com os hooks nativos do React.

Você pode ver a demo de como ficou [aqui](https://replacing-redux-to-hooks.netlify.com/).

Ressaltando que os dois únicos pontos negativos comparados ao Redux é a falta de uma extensão do navegador, como o [Redux DevTools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=pt-BR), que nos permite debugar as interações com a store e também a falta de suporte para as actions assíncronas, como [redux-thunk](https://github.com/reduxjs/redux-thunk).

Também preciso dizer que dependendo do tamanho e complexidade da sua aplicação, usar o Redux poderá ser mais perfomatico do que os hooks.

Espero que não fique decepcionado comigo por causa desses pontos.

Todo esse exemplo está [nesse repositório](https://github.com/Sergioamjr/replacing-redux-to-hooks), fique a vontade pra baixa-lo, usa-lo, compartilha-lo e deixar uma star.

Qualquer sugestão, crítica ou comentário é super bem vindo, compartilhe comigo nos comentários a baixo.

Até breve.


Substituindo Redux por React Hooks


_Algorítmos, machine learning, big data, inteligência artificial_ estão cada vez mais presentes em nossas vidas. Mesmo que não percebemos, eles nos ajudam a tomar decisões, como, qual caminho seguir, qual filme assistir, o que comer, além de monitorar nossa saúde. Seja através da Internet, aplicativos, dispositivos vestíveis ou assistêntes de vozes, como a Alexa, Siri, Cortana. E com grandes coorporações não é diferente, elas também utilizam machine learning para tomar decisões baseadas em números e lucro.

## Mas o que é Machine Learning?

Machine Learning são algorítmos autônomos que evoluem e aprendem sozinhos analisando grandes quantidades de dados. O próprio algorítmo calcula e decide a melhor forma de fazer uma tarefa. Isso pode incluir [jogar xadrez](https://blogs.funiber.org/pt/tecnologias-tic/2018/01/29/maquina-aprende-xadrez-em-apenas-quatro-horas), [dirigir um carro](https://www.intellias.com/how-machine-learning-algorithms-make-self-driving-cars-a-reality/), [reconhecer um rosto](https://computerworld.com.br/brandpost/tecnologia-de-reconhecimento-facial-movida-ia-e-machine-learning/), considerando N fatores diferentes.

E como vários programadores trabalham ao longo do tempo adicionando essas considerações no algoritimo, é bem comum que ele evolua e se torne tão complexo ao ponto de não saberem explicar como ele funciona e toma as decisões.

## E como redes sociais podem ser racistas?

Redes sociais lucram dinheiro mostrando propagandas para seus usários, pra isso, é importante que eles passem o maior tempo possível online. Então o algorítmo recebe essa tarefa, _manter as pessoas conectadas_, como ele vai fazer isso? O proprío algorítmo irá decidir analisando o comportamento dos usuários. Se posts de pessoas brancas geram mais interações (curtidas, comentários, compartilhamentos), o algoritimo irá mostra-los mais.

Isso também acontece com [notícias falsas ](https://www.wionews.com/world/fake-news-travels-six-times-faster-on-twitter-than-real-news-mit-study-327948), [pessoas feias e pobres](https://www.hypeness.com.br/2020/03/como-o-tik-tok-esconde-usuarios-feios-e-pobres-para-atrair-mais-pessoas/), [padrões de beleza](https://medium.com/social-media-as-news-cod/how-social-media-impacts-beauty-standards-for-boys-and-girls-b6bebb6386ac). Pois, lembre-se, o objetivo do algorítmo é manter as pessoas conectadas, não julgar o que é certo ou errado.

## It has been watching us

E o algoritmo conhece as pessoas melhor do que elas mesmos, pois ele tem registrado todas curtidas, comentários, vídeos assistidos, tempo em cada página, posts ignorados desde o momento em que elas criam uma conta.

Por mais que as pessoas digam que apoiem a diversidade, igualdade e respeito, ele sabe que elas inconscientemente interage mais com vídeos de gatinhos, receitas, memes, regimes autoritários, teorias da conspiração ou etc.

E sabendo disso, ele vai criar um feed personalizado pra cada pessoa, dependendo de seu humor, horário do dia, curtidas e buscas pra manté-las o máximo de tempo possível conectadas, e claro, mostrando uma propaganda a cada 3 publicações.

## Qual a melhor forma de resolver isso?

Eu, por exemplo, gosto de ver vídeos de guitarristas; deveria então o algorítmo se preocupar em me mostrar 50% de guitarristas brancos e 50% de guitarristas pretos? Permitir que as pessoas escolham a preferência do conteúdo que elas querem ver, mesmo que isso afete sua percepção da realidade? Devemos nos esforçar a interagir com mais contéudos de pessoas pretas para burlar o algorítmo e fazer com que elas ganhem mais espaço? Seja como for, isso só irá mudar quando as redes sociais reverem seu modelo de negócio e as pessoas se conscientizarem de que esse problema existe.

## Conclusão

Sabendo disso, gostaria de perguntar, o algorítmo que é racista ou ele apenas reflete o racismo oculto da nossa sociedade? Pois assim como no mundo offline, as pessoas pretas, e outras minorias, não tem tanto espaço na internet. Mas não é porque iss já acontece que deveria ser aceito em qualquer esfera, online ou offline.

Diferente do mundo lá fora, onde existe política, votações, leis e um passado histórico de segregação, a Internet não tem fronteiras e deveria ser um espaço de igualdade entre todos. Grandes serviços são feitos por grandes empresas e elas são as únicas responsáveis por manter esses algorítmos e estão mais propensas a mudar quando vêem seu lucro ou reputação ameaçados, por isso é importante as pessoas falem sobre isso e as pressionem pra mudar.

## Referências

Se você se interessou por essas questões eu gostaria muito de recomendar algumas coisas onde isso é discutido mais profundamente. Os livros [21 Lições Para o Século 21](https://www.amazon.com.br/21-li%C3%A7%C3%B5es-para-s%C3%A9culo/dp/8535930914) e [Homo Deus](https://www.amazon.com.br/Homo-Deus-breve-hist%C3%B3ria-amanh%C3%A3-ebook/dp/B01LXCJTO4) do Yuval Harari, que são meus favoritos, o incrível documentário da Netflix [O Dilema das Redes Sociais](https://guiadoestudante.abril.com.br/estudo/dilema-das-redes-por-que-assistir-documentario-netflix/), também o podcast [Your Undivided Attention](https://open.spotify.com/show/4KI3PtZaWJbAWK89vgttoU?si=PEDuJRtaSOeBZiH2TWTbKg) em inglês e o perfil da [Nina da Hora](https://www.instagram.com/ninadhora/) no Instagram, que é uma cientista e ativista e fala muito sobre isso.


Como algorítmos podem ser racistas?


Mockar suas requisições do backend no lado do front end pode ser muito útil na hora do desenvolvimento e irei apresentar duas formas de fazer.

### Vantagens de mockar requisições no front-end.

- Navegar e desenvolver sem depender do backend.
- Escrever testes de integração E2E na sua aplicação.
- Economizar o tempo de espera de requisições assíncronas.
- Economizar requisições em uma API pública com limite de requests.
- Desenvolver mais rápido com os dados que você precisa.

No meu trabalho nós combinamos o modelo do response com um backend, começamos a desenvolver com mocks e no final testamos com o backend real só pra garantir que tudo esteja funcionando.

Com isso chegamos até a economizar dinheiro da empresa ao criar um ambiente de demonstração da nossa aplicação usando mocks e não precisar de uma infra pro backend.

Pra esse exemplo irei criar uma listagem de personagens. Como estamos falando apenas das requisições, você pode usá-lo com _React, Angular, Vue, Vanilla_ ou whatever framework.

Antes de tudo, vamos criar nosso arquivo de mock.

```json
{
  "users": [
    {
      "name": "John"
    },
    {
      "name": "Mike"
    }
  ]
}
```

Agora vamos criar nossas funções responsáveis pelo requets.

```javascript
import userMocks from './userMocks.json';
const mockRequests = true;
const BASE_URL = 'https://www.you-api.com';

const returnAsPromise = (mock) => {
  return new Promise((resolve) => resolve(mock));
};

export const fetchAllUsers = () => {
  if (mockRequests) {
    return returnAsPromise(userMocks);
  }

  return fetch(`${BASE_URL}/all-users`);
};

export const fetchSingleUser = (id) => {
  if (mockRequests) {
    return returnAsPromise(userMocks.users[0]);
  }

  return fetch(`${BASE_URL}/single-user?id=${id}`);
};
```

Dessa forma precisamos apenas mudar a variável mockRequests para receber as requisições mockadas ou não.

### Usando axios-mock-adapter

Uma alternativa de mockar suas requisições é usar o pacote do npm axios-mock-adapter. Ele deve ser usado junto com o axios, que também é outro pacote para requisições HTTP.

Instalando as dependências:

```bash
npm install axios axios-mock-adapter
```

Configurar nosso arquivo de mocks assim:

```javascript
import MockAdapter from 'axios-mock-adapter';
import userMock from './mock';

const useMock = (axios) => {
  const mock = new MockAdapter(axios);

  mock.onGet(/all-users/).reply(200, userMock);
  mock.onGet(/single-user/).reply(200, userMock.users[0]);
};

export default useMock;
```

importa-lo e usa-lo no nosso arquivo de requisições:.

```javascript
import axios from 'axios';
import useMock from './useMock';

const mockRequests = true;
const baseURL = 'https://api.themoviedb.org';

const client = axios.create({
  baseURL,
});

if (mockRequests) {
  useMock(client);
}

export const fetchAllUsers = () => {
  return client.get('/all-users');
};

export const fetchSingleUser = (id) => {
  return client.get(`/single-user?id=${id}`);
};
```

Se você ver na documentação, a instância do _axios-mock-adapter_ recebe tem alguns métodos como `onGet`, `onPost`, `onPut`, `onDelete` que recebe o endpoint que será mockado e encadeando o reply é possível retornar o status code e o response que queremos.

### Dicas

É ideal substituir o mockRequests por uma variável de ambiente no .env, assim, podemos habilitar/desabilitar os mocks da aplicação em qualquer ambiente bem rápido.

```bash
MOCK_REQUESTS=ALL
```

```javascript
const mockRequests = process.env.MOCK_REQUESTS === 'ALL';
```

Você pode importar o useMock dentro da condição que verifica o mockRequests para os arquivos de mock não irem para o seu bundle final.

```javascript
if (process.env.NODE_ENV !== 'production' && mockRequests) {
  const useMock = require('./mockConfig');
  useMock(client);
}
```

Pode dar um pouco de trabalho pra você atualizar todos os mocks dependendo da quantidade de requições que você tem e as mudanças feitas no backend.


Mockando suas requisições like a pro


Scroll infinito não é algo comum de se ver mas pode ser muito útil e prático na hora de exibir uma lista sem ter que usar uma paginação e precisar de uma maior interação do usuário.

Eu já precisei fazer em um projeto há um tempo e utilizei essa lib que funcionou muito bem, porém, recentemente eu decidi reescrever esse projeto e tentar criar o scroll infinito com react hooks e a IntersectionObserver API, sem nenhuma lib externa, e funcionou muito bem. Por isso gostaria de compartilhar o resultado com vocês.

Ele será bem simples, usarei um componente com um state pra indicar o estado do loading na página, outro para armazenar os dados da nossa listagem e a referência de um componente. Ocultarei o CSS por ser irrelevante mas você pode ver o resultado final [no repositório](https://github.com/Sergioamjr/react-infinite-scroll-example).

### Criando nosso componente

Primeiro vamos criar nosso componente que exibirá os dados.

```js
import React, { useState, useRef } from "react";

export default function App() {
  const lastRef = useRef(null);
  const [isLoading, setIsLoading] = useState(false);
  const [todos, setTodos] = useState({
    itens: [],
    page: 0,
    totalPages: 1,
  });

  return (
    <div>
      <h2>Lorem ipsum's list</h2>
      {todos.itens.map(({ title }, index) => {
        return (
          <div key={index}>
            <p>{title}</p>
          </div>
        );
      })}
      {!!todos.itens.length && <div ref={lastRef} />}
      {isLoading && <p>Loading...</p>}
    </div>
  );
}

export default App;
```

### Buscando dados da API

Também precisamos de um método que faça a requisição HTTP buscando os dados de alguma API. Eu criei uma função chamada fetchTodos que recebe o número da página que quero buscar como parâmetro. Pra esse exemplo eu mockei o retorno dessa função, não irei compartilhar o código aqui pois é pra um caso muito específico, se quiser você pode ver o código que eu fiz clicando aqui, o mais importante é que você tenha uma API que retorno no mínimo esse formato de dados:

```js
{
  itens: [{...}],
  totalPages: X,
  page: X,
}
```

### Custom Hook useIsElementVisible

Agora iremos criar nosso custom hook que indicará se o elemento está visível na tela, usando a API IntersectionObserver pra isso, que é nativa dos navegadores.

```js
import { useEffect, useState } from 'react';

export default (el) => {
  const [isVisible, setIsVisible] = useState(false);
  const callback = ([entry]) => {
    setIsVisible(entry.isIntersecting);
  };

  useEffect(() => {
    const watch = new IntersectionObserver(callback);
    if (el) {
      watch.observe(el);
      return () => watch.unobserve(el);
    }
  }, [el]);

  return isVisible && !!el;
};
```

Nosso objetivo é passar a referência de um elemento em baixo da lista e verificar se ele está visível na tela ou não. Se sim, disparamos a função pra buscar mais itens.

### Atualizando nosso componente

Tudo pronto, agora vamos criar nosso método pra buscar os dados. Também usaremos o hook useEffect duas vezes; para disparar a função no carregamento da página e quando o elemento a baixo da lista estiver visível.

```js{1, 13-38}
import React, { useState, useEffect, useRef } from "react";
import useIsElementVisible from "./hooks/useIsElementVisible";
import { fetchTodos } from "./services";

export default function App() {
  const lastRef = useRef(null);
  const [isLoading, setIsLoading] = useState(false);
  const [todos, setTodos] = useState({
    itens: [],
    page: 0,
    totalPages: 1,
  });

  const isLastVisible = useIsElementVisible(lastRef.current);

  useEffect(() => {
    // Fetch no mount da página.
    getMoreTodos(todos.page + 1);
  }, []);

  useEffect(() => {
    // Fetch ao chegar no final da lista.
    if (isLastVisible) {
      getMoreTodos(todos.page + 1);
    }
  }, [isLastVisible]);

  const getMoreTodos = async (page) => {
    try {
      setIsLoading(true);
      const newTodos = await fetchTodos(page);
      setTodos((prev) => ({
        ...newTodos,
        itens: prev.itens.concat(newTodos.itens),
      }));
      setIsLoading(false);
    } catch (err) {}
  };

  return (
    <div>
      <h2>Lorem ipsum's list</h2>
      {todos.itens.map(({ title }, index) => {
        return (
          <div key={index}>
            <p>{title}</p>
          </div>
        );
      })}
      {!!todos.itens.length && <div ref={lastRef} />}
      {isLoading && <p>Loading...</p>}
    </div>
  );
}

export default App;
```

### Conclusão

E está pronto nosso componente com scroll infinito. Eu apenas implementei a listagem e loading dos dados nesse exemplo, fique a vontade de estiliza-los como preferir. No mundo real você também deve tratar a excessão no catch do método getMoreTodos se a API retornar algum erro.

Você pode ver o repositório com todo o código clicando aqui.

Você pode ver [a demo](https://react-hooks-infinite-scroll.netlify.app/) ou [o repositório](https://github.com/Sergioamjr/react-infinite-scroll-example) com o código.


Últimos posts