Hooks - useEffect e personalizados
Tags: javascript, webdev, beginners, react
Published: 2022-01-24 21:12:18

## useEffect

### O que é?
É uma função nativa do React adicionada na versão 16.8.0, popularmente conhecida como hook de efeito. É uma funcionalidade recente, logo códigos legados normalmente ainda não a utilizam.

### O que faz?
Funciona de forma similar aos _life cycle methods_ dos componentes de classe, ou seja, executa trechos de código após o componente ser montado, sofrer atualizações e/ou ser desmontado.

O `useEffect()` foi criado justamente para permitir que componentes funcionais pudessem ter acesso aos métodos de ciclo de vida dos componentes de classe, sendo assim, __esse hook pode ser comparado a um compilado de todos os métodos em uma única função__.

### Sintaxe
O `useEffect()` possui diversas peculiaridades em sua sintaxe que alteram seu comportamento, porém sua __estrutura mais básica consiste em uma função que pode receber até dois parâmetros__, sendo o primeiro uma callback e o segundo um Array de controle.

A callback será a função a ser executada sempre que o efeito executado corresponder ao efeito esperado. __Definimos o efeito que acionará a callback através do segundo parâmetro__, o Array de controle, nele iremos passar todos os estados a serem monitorados, assim sempre que o estado monitorado sofrer um efeito, o `useEffect()` será disparado.

```
useEffect(() => {});
useEffect(() => {}, []);
useEffect(() => {}, [someVariable, otherVariable, anotherVariable]);
```

___

## useEffect > Life Cycle Methods

### componentDidMount
Para criarmos um `useEffect()` com funcionalidade similar ao `componentDidMount()` devemos passar um Array vazio como segundo parâmetro, assim a callback só será disparada uma única vez, quando o componente for montado.

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

### componentDidUpdate
Essa é a funcionalidade padrão do `useEffect()`, se chamarmos o hook sem passarmos o Array de controle, a callback será disparada sempre que uma alteração ocorrer, o que pode gerar perda de performance, além de loops infinitos.

Outra forma de “simularmos” o `componentDidUpdate()` é passarmos o estado que gostaríamos que fosse monitorado como valor do nosso Array de controle, assim a callback somente será disparada quando o estado, definido por nós, sofrer alteração.

```
useEffect(() => {});
useEffect(() => {}, [someVariable]);
```

Lembrando que nunca podemos alterar o estado que está sendo monitorado através da callback do `useEffect()`, pois isso gerará um loop infinito.

### ComponentWillUnmount
Diferente dos outros métodos de ciclo de vida, esse não tem relação com o Array de controle, tudo que precisamos fazer é __retornar uma função dentro da callback do `useEffect()`__.

```
useEffect(() => {
  return () => {}
});
```

___

## Hooks Customizados

### O que é?
São funções criadas por nós que tem como diferencial atuarem como hooks.

### O que faz?
Os hooks customizados servem para encapsular e permitir a reutilização da lógica, assim como funções puras. Logo seu uso é incentivado, sendo inicialmente difícil saber quando devemos customizar um hook, mas a regra em geral é a mesma que para funções:

_"A lógica se repete várias vezes em diferentes componentes? Então é uma boa ideia personalizar o hook.”_

### Sintaxe
Por se tratar de algo _“customizável”_ sua sintaxe é muito volátil e varia de acordo com o objetivo do hook. Porém sua sintaxe mais básica é constituída de pelo menos um `useState()` e um `useEffect()`, sendo que, o retorno desse tipo de hook deve conter todas as informações que desejamos reutilizar, isso inclui a informação para leitura, bem como a função para modificação dessa informação.


```
function useHookCustomizada(defaultValue) {
  const [data, setData] = useState(defaultValue);
  const [loading, setLoading] = useState(false);

  const getData = async () => {
    const res = await fetch('url');
    const data = await res.json();
    setData(data);
  }

  useEffect(() => {
    setLoading(true);
    getData();
    setLoading(false);
  }, []);

  return data;
}
```

No exemplo acima temos um hook customizado genérico, onde será feito uma requisição a uma API qualquer e os dados retornados serão disponibilizados.