Fetching data usingReact Query

[naveenbteli]

Hi Team,

This codebase contains a lot of useEffect() and state updations for data fetching from the backend, which get triggered and result in multiple re-renders, this leads to performance issues, can we improve our data fetching mechanism

I would like to propose using ReactQuery as an alternative solution. This library can replace most of the useEffect() hooks and state updates related to data fetching and can also help to keep track of the fetching status.

Please let me know if you have any questions or concerns about this proposal.

Thanks.

FYI @MayurSChittaragi @chrisvrose @Prajwalprakash3722 @sannidhi-s-shetty

[Prajwalprakash3722]

Let's make note of pros and cons for replacing, and also try to estimate the work required to replace.

[chrisvrose]

Has there been any updates on this issue outside of this thread?

useEffect's biggest issue is the number of ways it can be used. I don't see any issues here, since we primarily use it to fetch data, and in those cases useEffect runs only once (Condition: the dependencies argument is set to []).

However, structuring and writing this query fetching logic is annoying, and we can still gain from the structure it gives to our code.

Now for react-query, it is quite heavy of a dependency considering the function it would do for us. Can we evaluate swr as well?

• https://bundlephobia.com/package/react-query@3.39.3
• https://bundlephobia.com/package/swr@2.1.1

[Prajwalprakash3722]

The structure of useEffect() is annoying and delicate in this case, we're maintaning lot of states take loading state for example. I understand why @naveenbteli was proposing to use a data-fetching library as it would handle all of the states instead of us handling which'll lead to spaghetti code.

pretty good find about swr, taking a look at it now