How to reuse functional components in Next.js 13 Server Components

Question

I cannot separate the logic from the component with this error:

Error: Event handlers cannot be passed to Client Component props.
  <textarea rows={18} placeholder=... onInput={function}>
                                              ^^^^^^^^^^
If you need interactivity, consider converting part of this to a Client Component.

I know that I can put "use client"; at the top of the Page.tsx to fix it. However, is it correct way and you are no longer able to do following pattern since Next.js 13 with Server Components?

// TextArea.tsx

type TextAreaProps = {
  onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
};

export default function TextArea({ onChange }: TextAreaProps) {
  return <textarea onChange={onChange} />;
}

// Page.tsx

function Page() {
  return (
    <>
      ...
      <TextArea onChange={(e) => console.log(e.target.value)} /> // Error
    </>
  );
}

I could create a separated component for each of unique job, but that sounds inefficient.

score 0 · Answer 1 · answered Jun 27 '23 at 17:14

The answer to your question depends on your page content. If most of your page components depend on client-side state or events, then there is no harm in declaring the whole page as a client component. However, if you want considerable portion of your page to be rendered exclusively on the server, then you should look into refactoring interactive sections of your page into separate client components.

p.s. Your code snippet doesn't provide sufficient details to offer any particular refactoring

How to reuse functional components in Next.js 13 Server Components

1 Answers1