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.
Top comments (1)
Sensacional, principalmente os hooks customizados. Não tinha conseguido entender a essência dos custons hooks, mas agora que peguei a lógica fica mais simples de implementar.