uso do UseEffect💫

Fala dev!

Esses dias estava assistindo um tutorial de ReactJs e o professor falou muito por cima que não era necessário usar useEffect, até fui atrás para saber mais, mas não fui muito eficiente em minhas pesquisas.

Então resolvi abrir esse forúm para ver se algum pode sanar minhas dúvidas:

Qual é o propósito em usar?
Por que usar?
Tem alguma alternativa melhor? Se sim, por quê?

Agradeço a todos que puderem ajudar!

VictorCassiano anteontem

Existem formar mais eficientes. Temos libs que foram feitas para eliminar o useEffect do codigo, por exemplo a SWR e Tanstack. Em meus projeto eu gosto de utilizar Tanstack jutamente com NUQS que deixam o codigo mais limpo e mais perfomático.

Você pode entender mais lendo esse artigo link

estevaog3 anteontem

Matematicamente,

$Estado + efeitos = Interface$, onde $Interface$ é React/JS/Angular/Bootstrap/qualquer outro framework.

Desta forma, se o estado (useState) não ta suprindo o que você precisa implementar, então use efeitos (useEffect). É simples assim.

Bônus: da uma olhada no use, um hook que pelo que já vi comentando (posso estar errado), pode substituir o useEffect: https://react.dev/reference/react/use

rafael anteontem

Tem um artigo na documentação que responde a sua pergunta: You Might Not Need an Effect.

Existem várias situações que as pessoas utilizam o useEffect sem necessidade, mas às vezes é necessário. Por exemplo, como a própria documentação diz:

You do need Effects to synchronize with external systems.

loliveirawebdev anteontem

Como a própria documentação diz, useEffect é uma ferramenta para sincronização com sistemas externos.

A frase "você não precisa usar useEffect" também vem da documentação, que tem o sentido de que se você está usando useEffect para qualquer outra coisa que não seja sincronização entre sistemas, provavelmente você não precisa dele e existe uma maneira mais eficiente de fazer essa "outra coisa".

Data fetching é sim OK de ser feito em useEffect, pois nada mais é que sincronização entre sistemas. Porém, como já comentaram, hoje existem libs que são mais eficientes e inteligentes para isso (como SWR)... Mas ainda assim, não é um pecado fazer data fetching em useEffect e inicialmente essa era a unica forma de realizar esse tipo de sincronização.

Opaopaopa anteontem

Não que eu tenha lá muito conhecimento sobre, mas acho que consigo responder a essas perguntas:

Qual é o propósito em usar?

Assim, quando voce carrega um componete, e quer que ele tenha alguma informação de alguma api , voce pode usar o UseEffect para quando o componente for renderizado ele busque essas informações e atualize o seu estado, assim exibindo a resposta da api que voce queria, isso é util em varias situações, como buscar dados de um usuário ou algum registro aleatório

Por que usar?

acho que isso entra dentro de resposta anterior, mas um motivo é porque é amplamente ultilizado e há varios exempos que voce pode seguir

Tem alguma alternativa melhor? Se sim, por quê? existem hooks como esse abaixo https://tanstack.com/query/latest eles tem alguns recursos a mais do que o UseEffect nomal

RafaellaDenlavor anteontem

Só complementando seu comentário. O propósito do usseEffect não é fazer chamadas em API. Uma chamada não é um efeito colateral. Um outro exemplo seria abrir uma modal assim que o conteúdo é carregado ou capturar dados do localStorage. Pra fazer chamadas em API, recomendo o SWR. Ele é mantido e foi criado pela Vercel e já trás informações importantes que normalmente usando o useEffect você precisaria ficar criando estados, como isLoading, error e isValidating. Além disso ele deixa aberto para fazer a chamada com a tecnologia que quiser: Axios, fetch, etc. É interessante porque você também consegue personalizar se quer que os dados atualizem automaticamente ao retornar para a aba, o quando a internet é restabelecida. Enfim, espero que esse comentário ajude um pouco.