state manangement in rsc (app router)
Unanswered
Orinoco Crocodile posted this in #help-forum
Orinoco CrocodileOP
I want to use
and I want to make it use in nested component with avoiding props drilling too like
Layout -> SiteHeader -> AvatarButton -> Avatar Dropdown
any example or library to solve this problem
getUser() in root layoutand I want to make it use in nested component with avoiding props drilling too like
Layout -> SiteHeader -> AvatarButton -> Avatar Dropdown
any example or library to solve this problem
31 Replies
In RSC you can use cache()
the idea is that you wrap "getUser" with cache, for instance "const rscGetUser = cache(() => getUser())"
then you can safely call rscGetUser anywhere in your RSCs
but do you need to be carful when cross cache between server and client context? or are you suggesting the cache usage in last server comp before client for dropdown?
@riský but do you need to be carful when cross cache between server and client context? or are you suggesting the cache usage in last server comp before client for dropdown?
you can setup a client-context wherever appropriate if you need to pass the data down to the client and avoid props drilling there
usually you would call "rscGetUser" say in the root layout, setup a client context there
you can then use "rscGetUser" in other RSCs too (avoiding props drilling), and if you need the user client-side, "useContext"
o.O nicee
either way you fetch the user only ever once
i just used it for basic deduping rn
@Eric Burel then you can safely call rscGetUser anywhere in your RSCs
Orinoco CrocodileOP
so what if im in this situation like
AvatarButton (RSC) > Avatar Dropdown (Client) > Avatar Information (RSC)
Is it work or not?
because client component (Avatar Dropdown) is wrapped Avatar Information
AvatarButton (RSC) > Avatar Dropdown (Client) > Avatar Information (RSC)
Is it work or not?
because client component (Avatar Dropdown) is wrapped Avatar Information
you might then need to pass props...
Orinoco CrocodileOP
well, how nested is it?
as you can still use Eric's suggestion up until the last rsc before client
Orinoco CrocodileOP
hm let me try eric suggestion
@riský well, how nested is it?
Orinoco CrocodileOP
like this RootLayout (layout.tsx) => Providers (Client Component) => SiteHeader (RSC)
Orinoco CrocodileOP
anyway how to revalidate
getUser?@Orinoco Crocodile anyway how to revalidate `getUser`?
Using revalidatePath or revalidateTag https://nextjs.org/docs/app/api-reference/functions/revalidatePath
@Orinoco Crocodile so what if im in this situation like
AvatarButton (RSC) > Avatar Dropdown (Client) > Avatar Information (RSC)
Is it work or not?
because client component (Avatar Dropdown) is wrapped Avatar Information
AvatarInformation can either get the value from AvatarButton as props, or get the user again
the idea is that "getUser()" is cached so you can call it once or a million time in your React tree, the data are fetched once
you may add logs to double check
Orinoco CrocodileOP
is revalidatePath not working with fetch?
i tried with revalidatePath('/categories') but it's not work
I need to use revalidateTag instead
I need to use revalidateTag instead
@Orinoco Crocodile i tried with revalidatePath('/categories') but it's not work
I need to use revalidateTag instead
and does it work? I've seen some bug tickets on github related to that but didn't have the chacne to use those extensively yet
I will in the weeks to come I hope
so it's still a bit hard to differentiate bugs, unsupported stuffs, and things that are not supposed to work this way
@Eric Burel I will in the weeks to come I hope
Orinoco CrocodileOP
revalidateTag is work
but I prefers revalidatePath instead
but I prefers revalidatePath instead
ok sounds like a bug in Next not your fault
I've seena thread about that