Replace all uses of `useEffect` with `useQuery`

[mvadari]

https://react.dev/learn/you-might-not-need-an-effect

[Agastya18]

@mvadari can i try?

[mvadari]

@Agastya18 sure, go ahead

[Deeptanshu-sankhwar]

Hi @Agastya18 , if you're not working on it, I'd like to work on it. Thanks!

[Agastya18]

Ya sure, u can

[VyuduInc]

What’s up! I came across this issue and wanted to throw my hat in... swapping out useEffect for useQuery? Right up my alley,,, I love clean, optimized React.

Quick heads-up,,, I’ve got a solid two-week window right now and I’m planning to contribute to at least 7 solid projects during that time. Yours is definitely one I’d love to be part of.

I’ve been in the blockchain game since 2017... as a Forbes Tech Council writer, investor, and builder. Been deep in the dev side for a while now... especially around blockchain + React/Web3 stacks.

Here’s a link to some of my work if you wanna peep: https://vyudu-links.netlify.app/

Let me know if you’re cool with me taking this on... happy to make it smooth and clean.

Cheers,

[ckeshava]

@mvadari The linked tutorial page does not make a mention of useQuery react hook. Are you referring to this third-party library's useQuery hook?

useEffect is used to synchronize external systems based on changes in the internal component (state/ref/context) values. useQuery appears to be a way to asynchronously query the external world for information (possibly, without any changes to the react components internal state). I don't quite see how the two are always inter-changable.

[mvadari]

@mvadari The linked tutorial page does not make a mention of useQuery react hook. Are you referring to this third-party library's useQuery hook?

This is the package we currently use for the useQuery hook (see the package.json), which does appear to have been rebranded for v4 onwards to the link you sent.

useEffect is used to synchronize external systems based on changes in the internal component (state/ref/context) values. useQuery appears to be a way to asynchronously query the external world for information (possibly, without any changes to the react components internal state). I don't quite see how the two are always inter-changable.

They're not, but a good chunk of the old useQuery usages in this repo are querying the external world for information. And probably many of the other uses of useEffect can be replaced to something better, as the tutorial linked above describes.