Pass state from Async parent component into child that changes it and returns it back to the parent.
Answered
Chilean jack mackerel posted this in #help-forum
Chilean jack mackerelOP
So like in the title. I need to achieve this action that state is being shared between child and async parent component. Normally I would approach that with passing setState action into chid props and calls it inside child and wait for changes using useEffect() inside parent component but I can't use useState or useEffect beause the parent component is async server component. Anybody has any idea?
Answered by Asian black bear
also important: using next/navigation to change the query parameters will not cause a full page refresh, only for it to refetch the RSC (any RSC that views query parameters)
11 Replies
Asian black bear
Server components really do not share state with the client. Changing query parameters will make the RSC refresh with the new url
Maybe set a cookie and run router.refresh()
Chilean jack mackerelOP
yeah i thought about that but the thing is I don't want to refresh entire page everytime. That's the problem
Asian black bear
why do you want to use an RSC?
important: components with
use client are still server side renderedAsian black bear
also important: using next/navigation to change the query parameters will not cause a full page refresh, only for it to refetch the RSC (any RSC that views query parameters)
Answer
Chilean jack mackerelOP
so it may be possible to just redirect the page from child component with specific query and access that query in parent component?
without the full reload
@Asian black bear why do you want to use an RSC?
Chilean jack mackerelOP
Well beacuse my parent component is in fact a dynamic route page that gets the param and based on this param fetches the data.
Asian black bear
Query parameter might make sense then. Dont think of it as a redirect, it is more like doing history.replaceState or history.pushState.
Chilean jack mackerelOP
Thanks for that idea. It works just fine!