I'm really struggling with a limitation in React where props must be serializable for components that use the 'use client' directive. Specifically, I'm facing an issue with an 'onChange' function that doesn't qualify as a Server Action. The error suggests renaming 'onChange' to something like 'action' or adding 'Action' at the end, like 'onChangeAction', to make it clear it's a Server Action. Can anyone provide a workaround for this?
1 Answer
This issue usually pops up when using React Server Components (RSC) in Next.js. If you're seeing this error, it might be because you need to add 'use client' to the parent component as well, or turn that 'onChange' function into a server action. Remember, components without 'use client' only run on the server, so they shouldn't pass functions down unless those functions can execute on the server.
Got it! So if I have a root component in my app, it means I might end up making all my components client components, right? Like in my page.tsx, it could look like this:
function Page() { return
And then in RootClientComponent.tsx, I would have:
'use client';
function RootClientComponent() { return
Is that how it’s done?