How to pass state between components?
Answered
Rojoss posted this in #help-forum
RojossOP
Let's say I have a menu bar with a button and then I want to change a component deeper in the page, how would I pass the state for this?
In React I would just put the state on the parent component, the page itself in this case. But since the page is a server component that won't work.
I could wrap all in a client component but that doesn't sound like the best approach. So I'm curious what the best way to do this is? For example do people still use state management libs like Redux for this? I'm just making a small site so I rather avoid doing complex setups.
In React I would just put the state on the parent component, the page itself in this case. But since the page is a server component that won't work.
I could wrap all in a client component but that doesn't sound like the best approach. So I'm curious what the best way to do this is? For example do people still use state management libs like Redux for this? I'm just making a small site so I rather avoid doing complex setups.
40 Replies
RojossOP
I read the article about context providers and it was suggested to wrap provider in client component and add it like in screenshot. But by doing this you basically make all children client components right?
RojossOP
I thought when you have a client component that all components within will also be client components? But this is not true?
This is what AI told me "In Next.js, you cannot directly import a Server Component into a Client Component. All child components of a Client Component automatically become part of the client bundle. "
@Rojoss I thought when you have a client component that all components within will also be client components? But this is not true?
yea and that's absolutly true. If you do it like:
But when you do it like this:
'use client'
<div>
<ServerComponent /> // will automatically rendered as client component
</div>But when you do it like this:
'use client'
<div>
{children} // can be server component and will stay server component
</div>Basically don't import server components into client components
RojossOP
Oh interesting, so you can pass server components as props and they will stay server components? Or only for children?
That's it
RojossOP
Alright
Yes you can pass as props
RojossOP
So about my original question, would it make most sense to add a provider then for state management between components?
Upto you, you can do context but I just use the url
@Arinji https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns
RojossOP
Thanks for the link will give it a good read
It's a very powerful state manager
Np, the entire docs is a good read btw so when you get the time go through it
RojossOP
Yeah I asked before to use url but people said it's betyer to use client side state
....who said that lmao
RojossOP
2 people here haha
There are a lot of vids all over yt on how good the url is
@Rojoss 2 people here haha
Did they give any reasons?
RojossOP
Yeah cuz then you can do fully server rendered stuff right?
@Rojoss Yeah cuz then you can do fully server rendered stuff right?
Yes, the url can be accessed by both server and client components
You can do loading states as well
It's the best way imo to pass around props all over the site
Yes you do need to be careful
But that's with any client based storage of data
RojossOP
Alright will take that approach then I think
You don't just accept local storage values without checking them do you
Never trust your state as well, can easily be updated
RojossOP
Wait localstorage? I thought you meant with url to just use url params like /?editing=true
And just use redirects when you click button
Yea I was just giving an example of not trusting client data storage
But yea, that's how I would use the url.. search params
RojossOP
Alright yeah
Perfect thnx
Np, mark a solution if it helped
RojossOP
Not really one message that's the solution though haha
Eh, just anything that helped
RojossOP
Oki