React "use client" Directive & Client Boundaries

Understanding when to use (and when NOT to use) the "use client" directive in React Server Components architecture.

Core Concept: The Boundary

"use client" marks a boundary between server and client components - not a label for individual components.

Critical Rule: Once inside a client boundary, ALL imported components are automatically client components. You should NOT add "use client" to child components that are already imported by a parent client component.

Mental Model: The Fence

Think of "use client" as a fence or gate:

┌─────────────────────────────────────────────────────┐
│  SERVER TERRITORY                                   │
│  ┌─────────────┐                                    │
│  │ page.tsx    │  (Server Component - default)      │