What is the 'use client' directive and when do you need it?

Q: What is the 'use client' directive and when do you need it?

**Target Audience:** Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. **Difficulty:** Medium > **How to read this doc:** Each idea is explained in plain language first, then tagged with `📌 Interview term:`. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the **Verified** section, against real output from a build or a running server; each Verified block names the version it ran on. ## 1. Why This Even Matters — A Story First Think of a restaurant where the kitchen (the server) prepares every plate, and a few dishes come with a gas burner so the guest can finish them at the table (the browser). 'use client' is the sticker that says "this plate ships with a burner." Put the sticker on the soup and only the soup gets a burner. Put it on the tray and every plate on that tray gets one, including dishes that never needed heat. The mistake in the

The problem

Question presented to candidate: "Your teammate put 'use client' at the top of the root layout to make an error go away. What does the directive actually do, and where should it go instead?"

What a strong answer should cover:

'use client' declares a boundary between the server and client module graphs; it is a file-level directive, placed before the imports.
Everything the marked file imports becomes part of the client bundle, so it only needs to go on the entry point, not on every child.
Client Components still render to HTML on the server; the directive adds hydration, it does not turn off server rendering.
Server Components passed in as children (or other props) stay on the server even inside a client parent.
Props that cross the boundary must be serializable; state, effects, event handlers and browser APIs are the reasons to add it.

Clarifying questions expected:

"Which part of the page needs interactivity?" — the directive belongs on that leaf, not on the layout.
"Is anything in this tree reading secrets or the database?" — that code must not end up below the boundary.

Code / implementation expected: Yes — a small interactive leaf with the directive, used from a server page.

nextjs
use-client
client-components
rsc

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. Difficulty: Medium

How to read this doc: Each idea is explained in plain language first, then tagged with 📌 Interview term:. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the Verified section, against real output from a build or a running server; each Verified block names the version it ran on.

1. Why This Even Matters — A Story First

Think of a restaurant where the kitchen (the server) prepares every plate, and a few dishes come with a gas burner so the guest can finish them at the table (the browser). 'use client' is the sticker that says "this plate ships with a burner." Put the sticker on the soup and only the soup gets a burner. Put it on the tray

The solution is hidden so you can try first

7 min read · 8 sections

Read the code

A client leaf used from a server page, with server content passed through

// components/ClientShell.tsx
"use client";
import { useState } from "react";

export default function ClientShell({ children }: { children: React.ReactNode }) {
  const [open, setOpen] = useState(true);
  return (
    <div>
      <button onClick={() => setOpen(!open)}>toggle</button>
      {open ? children : null}
    </div>
  );
}

// app/page.tsx  (Server Component: no directive)
import ClientShell from "@/components/ClientShell";
import { getReport } from "@/lib/reports"; // starts with import "server-only"

export default async function Page() {
  const report = await getReport();
  return (
    <ClientShell>
      <p>{report.summary}</p>
    </ClientShell>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.