mediumFrontend

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?

**TL;DR.** 'use client' at the **top of a file** marks it (and every module it imports) as **Client Components**, enabling hooks, state, effects, and browser APIs. You need it whenever a component is **interactive**; keep it at the **leaves** so most of the tree stays server-rendered and ships less JS. Server tree (default) 'use client' boundary <text class='d-sub' x='2

94 views

Understand the problem

Opting a module (and its imports) into the client bundle.

nextjsuse-clientclient-componentsrsc

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

A minimal client leaf

'use client';                 // this file + its imports are client
import { useState } from 'react';

export default function Counter() {
  const [n, setN] = useState(0);            // hooks require 'use client'
  return <button onClick={() => setN(n + 1)}>Count: {n}</button>;
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What runtimes does Next.js support (Node.js vs Edge runtime)?

What is the output: 'standalone' build in Next.js and when do you use it?