Chapter 112: 'use client'

Core Idea

'use client', placed at the top of a file, marks every export in that module as a Client Component — the boundary that opts a subtree back into browser execution (interactivity, hooks like useState, browser APIs) inside an otherwise server-first RSC app.

Key Concepts

• File-level directive: written as the literal first line of a module ('use client';), it applies to every component exported from that file, not to a single function within a larger file.
• Marks the boundary, not just that one file: everything that file imports and renders is also effectively client-executed from that point down — the directive marks where the server→client boundary begins, and the whole subtree below it runs in the browser.
• Why it's needed: interactive behavior (event handlers, useState/useEffect, browser-only APIs like localStorage) can't work in a Server Component, which never runs in the browser at all — any component needing that behavior must be a Client Component.
• Props crossing into a Client Component must be serializable, same constraint as Server Function arguments (Ch 111) — a Server Component can pass a Client Component plain data, JSX (children), but not things like functions or class instances.
• Default assumption without the directive is Server Component (Ch 110) — 'use client' is the explicit opt-out into client execution, not the default state.

Code Examples

'use client';

export function LikeButton() {
  const [liked, setLiked] = useState(false); // useState requires client execution
  return <button onClick={() => setLiked(!liked)}>{liked ? '❤️' : '🤍'}</button>;
}

• What it demonstrates: the minimal shape — a component using useState/an event handler must live in a file marked 'use client', since neither works in a Server Component.

Key Takeaways

1. Mark exactly the components that genuinely need interactivity/browser APIs — marking too high in the tree unnecessarily pulls more code into the client bundle.
2. The directive is file-scoped, and its effect cascades to whatever that file imports and renders beneath it.
3. Props passed from a Server Component into a 'use client' component must be serializable — the same rule as Server Function arguments.

Connects To

• Ch 110 (Server Components): the default this directive opts out of.
• Ch 111 (Server Functions): the reverse-direction mechanism — server-only behavior callable from inside a Client Component.