How to avoid infinite queries with useEffect and make a React component responsive?
Unanswered
Axus posted this in #help-forum
AxusOP
Hello,
I code a React (AchievementsComponent) component in my Next.js app that uses useEffect to retrieve and view the achievements data. I tried to put achievements in the dependencies of useEffect, but this leads to infinite queries.
Problem :
Without dependency, the data does not update automatically.
With dependent achievements, requests are executed in a loop.
Objective:
Make the component responsive to changes (for example, after completing a quest), without needing to refresh the page and without triggering infinite queries.
the component is in join piece
if you want any information, tell me
Thanks for helping
I code a React (AchievementsComponent) component in my Next.js app that uses useEffect to retrieve and view the achievements data. I tried to put achievements in the dependencies of useEffect, but this leads to infinite queries.
Problem :
Without dependency, the data does not update automatically.
With dependent achievements, requests are executed in a loop.
Objective:
Make the component responsive to changes (for example, after completing a quest), without needing to refresh the page and without triggering infinite queries.
the component is in join piece
if you want any information, tell me
Thanks for helping
7 Replies
Since you are using client side data fetching you should be using swr or tanstack query
AxusOP
@joulev The problem with SWR is that it's slow. I want to display the initial data immediately while the API call happens in the background, so the user doesn’t notice any delay. SWR should render the UI reactively when the achievements value changes without affecting performance. The goal is to show initial data while ensuring a faster update once new data is fetched.
tanstack query also has something similar
AxusOP
what about using context ?
umm i don't think react context is relevant here
AxusOP
i used a custom hook useAchievements