Props drilling from Server Component
Answered
Common carp posted this in #help-forum
Common carpOP
Hello, what is the best practice of sharing data after fetching it from your "main" server component ? Props drilling was ok till one point but slowly its becoming unmaintainable. I was thinking of creating a wrapper client component which sets all the data as state and then using this store between all other client components which belong to the "main" server one but this really looks like anti pattern or at least semi optimal solution to me.
Thanks in advance
Thanks in advance
18 Replies
Passing data depends on a lot of cases, what are you trying to pass @Common carp
I think you can look into things like zustand and redux
Common carpOP
I am fetching all kinds of information from the database that I am going to use on this page and trying to pass it down to nested client components, the problem is that they are slowly becoming too many and I am already on the 5th layer of props drilling. Not all data is passed from top to bottom but still some\
@Common carp I am fetching all kinds of information from the database that I am going to use on this page and trying to pass it down to nested client components, the problem is that they are slowly becoming too many and I am already on the 5th layer of props drilling. Not all data is passed from top to bottom but still some\
Ok so there is just one server component aka your page, and it fetches all of the data and passes it to a bunch of client components?
Are there any server components in the middle of this?
Common carpOP
ye smth like
page.tsx
There arent any server components after that only more client components that eitehr need a and b or only on of them
page.tsx
const a = await somethingFromtheDB
cont b = await smthElseFromDB
return(
<>
.....
....
<ClientCoponent a={a} b={b}/>
</>)There arent any server components after that only more client components that eitehr need a and b or only on of them
In that case, use react context
Answer
UseContext is best for that
mhm
Common carpOP
so i would have a wrapper client component like i thought
where I set up context from the data ?
Yups
Common carpOP
or use the first clietncomponent to set it up i guess
Yea, if the first client component is the parent of the rest, you can use that
or just use a dedicated Wrapper
Common carpOP
Ok thanks, will clean things up this way. Thanks for the help, both of u ❤️
No worries, mark a solution :D
Original message was deleted
boop