How to use useState Hook ?

[ishub-mobi]

How to use useState Hook in Hydrogen.... I couldn't find clear guidence when to use useState Hook and it's limitations
Even if I'm using useState hook in Client.jsx file then I have to render them in Server.jsx (Beacause server files are parent! aren't they ?)
Please help me in this problem.

[davidhousedev]

Have you given it a try? What kind of errors are you seeing? :)

Yes, useState can only be used in client components. Yes, client components are rendered by server components.

Your app will always have a top-level server component: App.server.jsx. That component, or any child server component, may render a client component which may invoke useState.

See this doc for more details: https://shopify.dev/custom-storefronts/hydrogen/framework/react-server-components

[ishub-mobi]

Okay got your point.
But i want to show my product in a Tab,
or in a Carousel,
I can only use useShopQuery hook into a server component,
so I'm finding middleware,
to do this task.

I'm trying to create this perticular UI.

UI from reequil.com

[davidhousedev]

Makes sense! Have you considered splitting up the components you're building? You could try the following:

• ProductDetails.server.jsx: invokes useShopQuery to fetch product data, passes it down as props to child client components
• ProductTabs.client.jsx: accepts product data as props and renders tabs
• ProductCarousel.client.jsx: accepts product data as props and renders a carousel

I get the feeling that you would learn a lot by reading through the code in the demo store template. Maybe give that a try and see what you can learn?

[ishub-mobi]

Okay Thank Your! I'll definetely give a try on this.