Sign in
Skip to solution
mediumFrontend

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

94 views
01

Understand the problem

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

nextjsuse-clientclient-componentsrsc
02

Attempt it yourself

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

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

'use client' at the top of a file marks it (and the modules it imports) as Client Components, enabling hooks, state, effects, and browser APIs. You need it whenever a component uses interactivity; keep it at the leaves so most of the tree stays server-rendered.

Solution ready — 2 min read

Classified // press E to declassify

04

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>;
}
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

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

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 68 of 95 decoded in the Next.js track. One more won't hurt.

Back to track