Data is fetching on every state change | Next.js | Page 1

twin zodiac Jul 31, 2024, 4:51 PM

#

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?

blissful riverBOT Jul 31, 2024, 4:51 PM

#

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

crimson shale Jul 31, 2024, 4:52 PM

#

you mean, data fetching happens everytime you change the state?

#

@twin zodiac

#

it can't be

twin zodiac Jul 31, 2024, 4:52 PM

#

yes

#

I'll record a video

#

twin zodiac Jul 31, 2024, 4:59 PM

#

crimson shale it can't be

what is it?

#

Data is fetching on every state change

sonic salmon Jul 31, 2024, 5:01 PM

#

twin zodiac what is it?

show your cardList component

twin zodiac Jul 31, 2024, 5:03 PM

#

sonic salmon show your cardList component

crimson shale Jul 31, 2024, 5:04 PM

#

how come this component is a server component?

twin zodiac Jul 31, 2024, 5:05 PM

#

as I understand, in this case this component turns into a client component

#

no?

#

if its put inside of another client component

crimson shale Jul 31, 2024, 5:06 PM

#

did you try to console.log inside getCards()?

twin zodiac Jul 31, 2024, 5:06 PM

#

what do you mean try to console?

#

to see what?

crimson shale Jul 31, 2024, 5:08 PM

#

no, just log cards and onCardSelect in this component

sonic salmon Jul 31, 2024, 5:08 PM

#

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

#

and your client component shouldn't be async

twin zodiac Jul 31, 2024, 5:13 PM

#

damn

#

yea, I removed async and its not reloading now

crimson shale Jul 31, 2024, 5:15 PM

#

crimson shale 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

crimson shale Jul 31, 2024, 5:15 PM

#

twin zodiac

I feel what you are gonna do - but I don't prefer this way

#

not a good practice

twin zodiac Jul 31, 2024, 5:16 PM

#

Yea, it was not the plan. I think I did it by accident actually

crimson shale Jul 31, 2024, 5:16 PM

#

anyway glad to hear that you resolved the issue!

twin zodiac Jul 31, 2024, 5:16 PM

#

thank you both!

#Data is fetching on every state change