Client Components

Client Components run in the browser, hydrate, and support state, effects, event handlers, and browser APIs. Mark files with `use client` at the top — the boundary applies to that module and its non-server imports.

Keep client trees small: wrap interactive widgets, not entire pages, unless the route is genuinely client-only.

					'use client';

import { useState } from 'react';

export function QuantityPicker({ max }: { max: number }) {
  const [qty, setQty] = useState(1);
  return <button onClick={() => setQty((q) => Math.min(max, q + 1))}>+</button>;
}
				

On interviews: explain hydration cost, when to lift state to client leaves, and forbidden server imports.

Common pitfalls: fetching on client what the server already had, huge client subtrees for static content, and secrets in environment variables prefixed for client exposure.

The trade-off is interactivity versus bundle and hydration expense.

Checklist:

• Minimize client subtree scope.
• Receive serializable props from server parents.
• Use server actions or APIs for privileged writes.
• Split heavy client code with dynamic import.