What does the 'use client' directive actually do?
Take a moment.
Say your answer out loud or write it down first — retrieval is what makes it stick. Reveal when you're ready.
Short answer
It marks the module — and everything it imports — as part of the client bundle, enabling hooks, events and browser APIs. It does NOT mean 'render only in the browser': client components still render on the server for initial HTML.
Detailed explanation
'use client' draws the server/client boundary at the file level. Everything above the directive stays server code; everything imported below joins the client graph. Consequences: files without it can't use useState/useEffect/event handlers; files with it lose direct server access (DB, fs, secrets) — fetch data in server parents and pass down props instead. Placement matters economically: marking a whole page 'use client' ships its entire subtree to the browser, so keep directives on small interactive leaves. The dual render nuance trips people: client components SSR on initial load (that's why hydration exists), they merely *hydrate* afterward. Related directives: 'use server' marks server actions. When you see hydration errors from event handlers missing, someone usually forgot the directive.
Example
// components/LikeButton.tsx
'use client';
import { useState } from 'react';
export function LikeButton({ count }: { count: number }) {
const [likes, setLikes] = useState(count);
return <button onClick={() => setLikes(likes + 1)}>♥ {likes}</button>; // needs client
}
// app/post/page.tsx — stays server:
// <article><LikeButton count={post.likes} /></article>Interview tip
Correct the misconception head-on — 'use client' ≠ client-only rendering — then show the leaf-component placement strategy with bundle-size reasoning.
Common mistakes
- Saying 'use client' disables server rendering for that component.
- Adding 'use client' to entire pages instead of interactive leaves.