React "use client" Boundary

Goal

Place the smallest useful client boundary. Keep server components as server components.

Rules

• "use client" marks an import boundary.
• All components imported below that boundary become client components.
• Add it only to files imported by a server component and needing client features.
• Do not add it to child components already inside a client boundary.
• Do not add it to pure presentational components.
• Keep data fetching in server components when possible.
• Do not pass server functions as client event handlers.

Add It When