setState in child component

[waxen shore]

I have a parent page that uses 'use client' and has a useState call that passes the setState into a child component, but I'm getting the error Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". Or maybe you meant to call this function rather than return it. Both have 'use client' on top, so why is it throwing an error? This only started happening after next 16

[dire rune]

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)

[tidal radish]

"I have a parent page that uses 'use client'"
better not mark your page.tsx as "use client"

"Both have 'use client' on top,"
adding "use client" to the top does a little more than just "marking" your component as client component. it is actually also marking your component as the gateway/boundary from server -> client. As such, all components that are marked with "use client" will be checked if they have any functions or unserializable props passed to them. As a result, passing a setState (or any function in that regard) is illegal unless you are trying to make "Server Actions" (which is what the error suggests, by adding "use server").

[waxen shore]

I want the entire page to be client side rendered because there is state being managed at the top

import { useState } from 'react';

export default function Page() {
    const [a, setA] = useState('');

    return (
        <>
            <Child a={a} setA={setA} />
            <Child2 a={a} />
        </>
    );
}```
so for a page like this, how would it work?

[tidal radish]

just use "use client" at the top of the tree where you dont pass any function

[tidal radish]

yea one way of doing this is by just creating a component like

export default function Page() {
  return <PageClient />
}

that way you dont use "use client" at page.tsx

[waxen shore]

I see, I guess I can do that

[tidal radish]

use "use client" where you clearly define, "Hey this is the front-line/front-gate where server meets client"

[waxen shore]

actually nvm I found my issue, it was apparently my layout file that needed use client instead, it just didnt tell me that was the problem and directed me to the page for the error...

[tidal radish]

thats even worse 😭

but okay

[waxen shore]

I dont even use any function calls in the layout, but I am using a ui library

[tidal radish]

okay, im just saying that usually its not good practice to put "use client" in layout.tsx or page.tsx

[sharp kraken]

why?

[waxen shore]

yeah ik, but I need it to manage state and its a pretty lightweight app

[sharp kraken]

if the page is entirely client side, it's fine.

i suspect the question is a bit flawed though. you likely want to use context to share state between siblings https://react.dev/reference/react/useContext

[tidal radish]

it was shown to have unexpected results in the past