How to share information between two client components in nextjs?

Question

I have two client components inside a server component. It is a date selector and a scoreboard that shows scores on that date. However, I do not want to have them in the same client component as I want them to be rendered in different parts of the UI. The scoreboard component needs the date to determine which scores are shown, so I am using useState. Is there anyway I can set useState for a client component from a different client component or what is the best way to go about this?

score 1 · Answer 1 · answered Aug 29 '23 at 02:24

1

I think "Lifting the state up" is the thing you're looking for. In short, you will place the useState on closest parent of both your components, and pass them down to each component.

This is documented by React on their own document.

answered Aug 29 '23 at 02:24

ngtrthinh

25
7

Yes but I would prefer not to do this because then the parent component would be made a client component as well – ZachSal Aug 29 '23 at 02:31
@ZachSal why do you want to keep the parent component a server component? – ngtrthinh Aug 29 '23 at 07:24

score 0 · Answer 2 · answered Aug 29 '23 at 02:39

I prefer to keep shareable values in context and consume in the components.

zustand also good alternative to do state management and share values between components. A small, fast and scalable bearbones state-management solution using simplified flux principles. Has a comfy API based on hooks, isn't boilerplatey or opinionated

How to share information between two client components in nextjs?

2 Answers2