all state managers are client-side so require client components

but this creates unnecessary “wrapper” components, where at a high level I receive data, and at a lower level I pass it into the state. Is this normal practice?

I'm facing this same "dilemma" i just realize the use client directive affects children's too, and not only that component, so by wrapping my app with the state manager i also made it all client side all of the suden. Is that the normal way to face it? idk what's the other path to take here, how do people manage states without making it client side?

That's wrong.

Otherwise you couldn't wrap the root layout with providers and still have server components.

Only components directly used within files marked with the use client directive are client components

But you still can pass in server components as props, most often as children

So things like

<Client>
  <Server />
</Client>

are possible and a valid approach of composing components

And the Server component isn't suddenly becoming a client component

Awesome thank you for that detailed answer. what you describe was my understanding up until a couple of hours ago, when i went to check the documentation to be sure, and i read:

[... by defining a "use client" in a file, all other modules imported into it, including child components, are considered part of the client bundle - and will be rendered by React on the client.]

So based on what you mention + the doc, i guess the deference is on HOW a component is a child of the "client component".

"use client"

import ServerComponent from "somewhere";

const TheParent = ({ children }) => {
  // useState or whatever
  
  return (
    <div>
      // This server component will actually be rendered on CS ?
      <ServerComponent /> 
      // But the children component will be server side ?
      {children}
    </div>
  );
}

It would be like that? i did i just make a mess? 😅

You can't import server components into files marked as client components

And children aren't necessaryly server components, because it depends what you pass into it

It can be either

then i have a different understanding on what a "server component" is, im calling that to components without the "use client" directive. I can import those into files/components marked with "use client"

The only thing you can say for sure is that within files marked with the directive every component you explicitly reference as <Foo> is also considered/embedded as a client component, no matter what.

no, yeah i know that, it was in this example, i was trying to show 2 different ways to get ""server"" components into the client component, either by importing it, or by the children param.