react-use-client-boundary

You need the use client directive when a component imported by a server component requires client-side hooks, event handlers, or browser APIs. It creates a client boundary to isolate interactive logic while keeping data fetching on the server.

To fix event handlers across boundaries, you must place the interactive logic inside a client component marked with use client. This Skill diagnoses boundary misconfigurations to ensure hooks and event logic are correctly moved to client components.

The best way to minimize client boundaries is to keep data fetching on the server and isolate only the interactive sections. This Skill provides recommendations that respect component import chains to prevent redundant client components.

You get errors using React hooks in a Server Component because hooks only work in client components. You must add the use client directive to move the component across the client boundary and enable hook functionality.

Yes, you can pass server-fetched data to a client component as props. This approach keeps data fetching on the server while placing interactive hooks and event logic within a minimal client boundary.

To convert a server-rendered page, extract the interactive filter into a separate component marked with use client. This creates a minimal client boundary that maintains server-side data fetching while enabling client-side interaction.