Passing a server side state to a deeply nested client component

[jovial notch]

So in Next.js have a cached data fetching function like this:
const fetchUser = React.cache(async () => ...);

In server components I can just get the state with
const user = await fetchUser();

but now I want to use the user object in a client component that is deeply nested.

I've tried to use stores (from zustand), but the problem is that this state is technically available at the initial render, but the store won't update until the component is mounted.

Is there a good way to do this? Tysm

[ripe quarry]

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)

[olive willow]

the best way would be to just check where u use your prop the first time and have that wrapped in a ssr component

from there u can pass it down the tree

[jovial notch]

like... for every child I have a prop that says user

and keep going until i reach that child

[olive willow]

if ur app is not big u can def do it that way

[jovial notch]

what is an alternative

[olive willow]

why dont u wrap the child which uses user in a seperate wrapper

[jovial notch]

what's an example of that

like i have deeply nested client components

client within client within client within client

so I'll have to pass a server state through all of that

from a server component at the top

[olive willow]

depends on where u want to use the prop

are u using it in every single client parent client component and passing that down aswell?

[jovial notch]

no

that's why it's annoying

i only need it in like a deeply nested child

[olive willow]

mind sharing me a repo or something

ill show you a example

[jovial notch]

well the i changed the code base

by a lot

during the last 10 hours

i'm passing the prop down in 4 client components now

[olive willow]

cool so u found a way that fits u probably

[jovial notch]

well it's still ugly

how i have it as a prop only to pass it to a child

[blazing seal]

uh just put it to a react context and useContext() that react context anywhere you want?

[jovial notch]

but like, a server side value and I have to use it before mount

in client components

[blazing seal]

async function Page() {
  const user = await getUser();
  return (
    <UserContext user={user}>
      ...
    </UserContext>
  )
}

"use client";
function ClientComponent() {
  const user = useUser();
  return ...
}

[olive willow]

👍

[blazing seal]

what do you mean by before mount? before mount the component doesn't even exist, and something that doesn't exist obviously cannot get a value

here using the context is safe from any rerendering perf problems because the value never changes

[jovial notch]

oh yeah right

i've been using zustand without contexts too much

[blazing seal]

if you don't want to use react context then i have a jotai example. i don't use zustand.

"use client";

import { atom, useAtom } from "jotai";
import { useHydrateAtoms } from "jotai/utils";

const userAtom = atom<{ name: string } | null>(null);

function DeeplyNestedComponent() {
  const [user] = useAtom(userAtom);
  return <div>{user?.name}</div>;
}

export function PageClient({ user }: { user: { name: string } | null }) {
  useHydrateAtoms([[userAtom, user]]);
  return <DeeplyNestedComponent />;
}