Hooks - useEffect e personalizados

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.