0% acharam este documento útil (0 voto)
5 visualizações7 páginas

Entendendo o Hook useEffect no React

Enviado por

lucas.psiki
Direitos autorais
© All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
0% acharam este documento útil (0 voto)
5 visualizações7 páginas

Entendendo o Hook useEffect no React

Enviado por

lucas.psiki
Direitos autorais
© All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd

useEffect

Alexandre, Jefferson,
Lucas, Misael
O que é hook?
Hooks são funções especiais introduzidas no
React 16.8 que permitem que você use o estado
e outras funcionalidades do React em
componentes funcionais, em vez de usar
componentes de classe.
Isso simplifica a sintaxe e permite a
reutilização de lógica de estado e efeitos
colaterais sem a necessidade de converter
componentes funcionais em classes.
Porque usar hook?

Os Hooks nos ajudam a organizar a lógica que será


usada em um componente.

Podemos até criar nossos próprios Hooks para


reutilizar a lógica em vários componentes.

A própria comunidade está criando Hooks muito


interessantes que podemos utilizar em nossos
projetos.
Para que serve o
useEffect?
Serve para tornar dinâmico o uso de
funcionalidades

Realiza efeitos colaterais em


componentes funcionais

recebe como primeiro parâmetro uma função que será


executada assim que o componente renderizar
Fetch com useEffect.
Este método também é empregado para a integração com APIs, otimizando o
uso de recursos de memória e minimizando o número de requisições,
prevenindo o risco de cair em iterações infinitas.

Se consumir uma API fora do useEffect, ele vai


criar um loop infinito de requisições.

Podemos adicionar o useEffect com um array vazio nas dependencias para


renderizar apenas 1 vez quando atualizar a pagina, ou adicionar uma variavel
nas dependencias para chamar este evento quando o valor desta variavel for
alterado.
Exemplo básico
Exemplo na prática
Ta funcionando?

Só faltou testar

Você também pode gostar