Data is fetching on every state change
Answered
Mugger Crocodile posted this in #help-forum
Mugger CrocodileOP
I have a page which is a server component. In this component I fetch data (a list of objects) using server actions. Then I pass the data to a client component that is inside the page. And in this client component I have a state that stores currently selected object from the list. The problem is that whenever I select an object from the list, all this data (list of objects) starts loading anew. How to stop it?
28 Replies
Mugger CrocodileOP
yes
I'll record a video
@James4u it can't be
Mugger CrocodileOP
what is it?
@Mugger Crocodile what is it?
Double-striped Thick-knee
show your cardList component
@Double-striped Thick-knee show your cardList component
Mugger CrocodileOP
how come this component is a server component?
Mugger CrocodileOP
as I understand, in this case this component turns into a client component
no?
if its put inside of another client component
did you try to console.log inside
getCards()?Mugger CrocodileOP
what do you mean try to console?
to see what?
no, just log cards and onCardSelect in this component
Double-striped Thick-knee
can you log something below this line and check how many time it's running
maybe your CardList component is rerendering when selectedCard state changes
Double-striped Thick-knee
and your client component shouldn't be async
Answer
Mugger CrocodileOP
damn
yea, I removed async and its not reloading now
@James4u how come this component is a server component?
always it's better to make UI pieces as components - don't try to have a single component for server/client
@Mugger Crocodile Click to see attachment
I feel what you are gonna do - but I don't prefer this way
not a good practice
Mugger CrocodileOP
Yea, it was not the plan. I think I did it by accident actually
anyway glad to hear that you resolved the issue!
Mugger CrocodileOP
thank you both!