When and how do you use Client Components?

Question

Accepted Answer

A **Client Component** runs in the browser (and is also pre-rendered on the server for the initial HTML). You opt in with the **`"use client"`** directive at the top of the file. You need them whenever you require interactivity, state, effects, or browser APIs. ## Declaring one ```tsx "use client"; // MUST be the first line of the file import { useState } from "react"; export default function Counter() { const [count, setCount] = useState(0); // ✅ hooks work here return ; // ✅ events } ``` ## When you NEED a Client Component ```text ✓ useState / useReducer / useEffect / useRef / useContext ✓ Event handlers (onClick, onChange, onSubmit) ✓ Browser APIs (window, localStorage, navigator, IntersectionObserver) ✓ Third-party libraries that use any of the above (most UI/animation libs) ``` ## The directive cascades to children Marking a file `"use client"` makes it and **everything it imports** part of the client bundle. So you want client boundaries to be **small and low in the tree** — "client islands" — rather than marking a top-level layout as client (which would pull the whole app into the browser bundle). ```tsx // ✅ Good: server page, small client island only where needed export default async function Page() { // Server Component const data = await getData(); return <>; // island is "use client" } ``` ## Passing data from server to client ```tsx // Server Component fetches, passes serializable props down to the client island ``` Props passed from a Server to a Client Component must be **serializable** (no functions, no class instances) since they cross the server→client boundary. ## Why it matters Client Components are how you add interactivity in an otherwise server-first app. The skill is keeping them minimal and at the leaves — interactivity where it's needed, Server Components everywhere else — so you ship the least JavaScript. Misplacing `"use client"` high in the tree is a common mistake that inflates the bundle and forfeits the benefits of Server Components.