react-use-client-boundary

Apply the "use client" directive at the top-level boundary when a component requires client interactivity, state, or partial hydration. Place it at the highest necessary level and avoid adding it to pure-presentational children to minimize client boundaries and maintain performance.

To convert a server component into a client component, add the "use client" directive at the top of the file. Ensure you enforce clear client boundaries by keeping nested children as server components when possible to avoid redundant directives and runtime errors.

Adding the directive to nested components creates unnecessary client boundaries, increasing the client bundle size. You should avoid placing it on pure-presentational children and instead apply it only at the top-level interactive boundary to optimize performance.

Yes, implementing stateful logic requires a client boundary. You must define the interactive component with the "use client" directive to enable state management and partial hydration within the Next.js server component architecture.

Runtime errors occur when interactive features like state or event handlers are used in server components. Adding the "use client" directive establishes the correct boundary, enabling client-side hydration and resolving these server component boundary errors.