
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