Hooks - useEffect e personalizados

useEffect

O que ?

uma funo nativa do React adicionada na verso 16.8.0, popularmente conhecida como hook de efeito. uma funcionalidade recente, logo cdigos legados normalmente ainda no a utilizam.

O que faz?

Funciona de forma similar aos life cycle methods dos componentes de classe, ou seja, executa trechos de cdigo aps o componente ser montado, sofrer atualizaes e/ou ser desmontado.

O useEffect() foi criado justamente para permitir que componentes funcionais pudessem ter acesso aos mtodos de ciclo de vida dos componentes de classe, sendo assim, esse hook pode ser comparado a um compilado de todos os mtodos em uma nica funo.

Sintaxe

O useEffect() possui diversas peculiaridades em sua sintaxe que alteram seu comportamento, porm sua estrutura mais bsica consiste em uma funo que pode receber at dois parmetros, sendo o primeiro uma callback e o segundo um Array de controle.

A callback ser a funo a ser executada sempre que o efeito executado corresponder ao efeito esperado. Definimos o efeito que acionar a callback atravs do segundo parmetro, 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 parmetro, assim a callback s ser disparada uma nica vez, quando o componente for montado.

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

componentDidUpdate

Essa a funcionalidade padro do useEffect(), se chamarmos o hook sem passarmos o Array de controle, a callback ser disparada sempre que uma alterao ocorrer, o que pode gerar perda de performance, alm de loops infinitos.

Outra forma de simularmos o componentDidUpdate() passarmos o estado que gostaramos que fosse monitorado como valor do nosso Array de controle, assim a callback somente ser disparada quando o estado, definido por ns, sofrer alterao.

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

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

ComponentWillUnmount

Diferente dos outros mtodos de ciclo de vida, esse no tem relao com o Array de controle, tudo que precisamos fazer retornar uma funo dentro da callback do useEffect().

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

Hooks Customizados

O que ?

So funes criadas por ns que tem como diferencial atuarem como hooks.

O que faz?

Os hooks customizados servem para encapsular e permitir a reutilizao da lgica, assim como funes puras. Logo seu uso incentivado, sendo inicialmente difcil saber quando devemos customizar um hook, mas a regra em geral a mesma que para funes:

"A lgica se repete vrias vezes em diferentes componentes? Ento uma boa ideia personalizar o hook.

Sintaxe

Por se tratar de algo customizvel sua sintaxe muito voltil e varia de acordo com o objetivo do hook. Porm sua sintaxe mais bsica constituda de pelo menos um useState() e um useEffect(), sendo que, o retorno desse tipo de hook deve conter todas as informaes que desejamos reutilizar, isso inclui a informao para leitura, bem como a funo para modificao dessa informao.

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 genrico, onde ser feito uma requisio a uma API qualquer e os dados retornados sero disponibilizados.