React - O que são hooks | Parte 01
Published: 2022-05-11 22:04:28

Hooks é a uma API React que tornou possível a criação de componentes funcional, antes apenas classes podiam armazenar estados. React disponibiliza uma API com funções que podemos usar para criar estados, gerenciar ciclo de vida do componentes e outras finalidades, veremos de forma básica característica e uso dos principais hooks utilizados no dia a dia.

### Regras dos hooks

- Apenas chame Hooks no nível mais alto. 
- Não chame Hooks dentro de loops, condições ou funções aninhadas.
- Apenas chame Hooks de componentes funcionais. 
- Não chame Hooks em funções JavaScript comuns ou classes.

> Documentação Oficial: [Regras dos Hooks](https://pt-br.reactjs.org/docs/hooks-rules.html)

## Utilizando os hooks

Os hooks são sempre importando do React no inicio do seu código com a seguinte sintaxe.

```jsx
import { useState, useEffect, useContext, useReducer, useCallback } from 'react';
```

### useState

O **useState** é o hook mais comum e utilizado gerenciar estado em componentes funcionais.
O useState recebe um parâmetro ( ou função ) que defini o valor inicial do estado, o seu retorno é um array onde a primeira posição é o estado e o segundo é uma função que é usada para atualizar o estado, por convenção utilizamos o prefixo **set** seguido do nome do estado para nomear essa função.

Exemplo de utilização do **useState**:

```jsx

// 1 - importa o hook.
import React, { useState } from 'react'

const Counter = () => {
 //  2 - Usa destructuring para pega os retorno do hook e setando 0 como valor inicial.
  const [counter, setCounter] = useState(0);

  // 3 - Uso do estado para renderizar o número na UI.
 // 4 - Utilizando o evento onClick chamando a função setCounter 
  para incrementar o contador ( state ).
  return (
   <>
      <div>
        Contador: {counter}
      </div>
      <button onClick={setCounter(counter + 1)}>Incrementar</button>
   </>
  )
} 
```

A função de atualização do estado pode receber uma função como argumento e essa função tem acesso ao valor do estado anterior para realizar alguma atualização baseado nele.

Exemplo:
```jsx
setState((prevState) => !prevState);
```

> !Importante - **setState** pode ser assíncrona pois ela agenda uma re-renderização.

É possível usar mais de um estado no componente, para isso apenas repita a chamada do **useState** atribuindo nomes as variáveis e funções de forma coerentes com suas atribuições, pois isso ajuda na legibilidade e manutenção do código.

Estado em react esta ligado a renderização da UI é importante o entendimento desse hook e uso junto a outros que serão estudados posteriormente.

---

> Documentação Oficial: [Usando o State do Hook](https://pt-br.reactjs.org/docs/hooks-state.html)

---

### useEffect

O **useEffect** é o hook utilizado no **lifecycle** do componente, ele não possui retorno e é usado para realizar "efeito colaterais" geralmente baseado em atualização de estado/props.

Em sua chamada são necessário 2 parâmetros, um função de efeito, e uma array de dependências, sempre que uma ou mais dessas dependências é alterada a função de efeito é executada novamente.

Entendendo o uso:
```jsx
...
const UserInfo = (props) => {

  useEffect(() => {
    console.log(`ID do usuário alterado para ${props.userID}`)
  },[props.userID])

}
```
Em toda mudança no userID o useEffect é executado novamente, no caso de chamada **async** é necessário criar uma nova função interna executando-a na sequência ou usando IIFE.

```jsx
...
const UserInfo = (props) => {

  useEffect(() => {
    async function loadUserData(){
      await services.getUserByID(props.userID);
    }

    loadUserData()
  }, [props.userID])

  useEffect(() => {
    console.log(`ID do usuário alterado para ${props.userID}`)
  },[props.userID])
}
```

> Caso queira chamar o **useEffect** apenas uma vez no **mount** do componente deixe o array de dependências vazio.

> Se não declara o array, o hook será executado em toda nova renderização do componente.

Os exemplos anteriores cobrem os casos de **montagem** e **atualização** do componente, existe também a fase de desmontagem, o **useEffect** pode ser utilizado nessa fase também e um caso comum é remover **eventListeners**.

```jsx
...
const App = () => {

  function handleScroll(event){
    console.log("Window Scroll...", event)
  }

  useEffect(() => {
    // cria o eventListener assim que o componente é montado.
    document.addEventListener("scroll", handleScroll);

    // remove o eventListener quando componente é desmontado.
    return () => removeEventListener("scroll", handleScroll);
  })
}
```

No exemplo estamos tratando o caso de **unmount** do componente, a função de retorno indica ao React que uma 'limpeza' precisa ser feita, nesse caso remover o **eventListener** e isso evita memory leak. Saber lidar com uso correto de dependências e o ciclo de vida dos componentes evita bugs e otimiza a aplicação.

Por enquanto é isso, no próximo artigo veremos outros hooks como **useReducer**, **useCallback**, **useMemo** e **useRef**.

---

> Documentação Oficial: [Usando Effect Hook](https://pt-br.reactjs.org/docs/hooks-effect.html)

---

> [Documentação Oficial - Introdução aos Hooks](https://pt-br.reactjs.org/docs/hooks-intro.html) | [API de Referência dos Hooks](https://pt-br.reactjs.org/docs/hooks-reference.html#basic-hooks)

> Veja também: [Aprendendo React - The Roadmap!](https://dev.to/nascimento_/apredendo-react-the-roadmap-5fii) | [React - O que são hooks | Parte 02](https://dev.to/nascimento_/react-o-que-sao-hooks-parte-02-5535)

> <sub> *Este post tem como objetivo ajudar quem esta começando no aprendizado de React, além de servir como incentivo no meus estudos de React criando outros posts pra fixação do aprendizado.* </sub>

---

<p align="center"> Me paga um ☕ ? | pix: <strong>nascimento.dev.io@gmail.com</strong> </p>

---


<h4> <em> Me Sigam :) </em> </h4>
[linkedin](https://www.linkedin.com/in/nascimento-dev-io/) | [github](https://github.com/nascimento-dev-io)