Use client directive in NextJS - Step-by-Step Execution

Concept Flow - Use client directive

File with React component

↓

Add 'use client' at top

↓

Next.js treats component as Client Component

↓

Component can use client-only features

↓

Component renders on client with interactivity

The 'use client' directive tells Next.js to treat a component as client-side, enabling interactivity and hooks.

Execution Sample

NextJS

"use client";
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

A simple client component with a button that increments a counter on click.

Execution Table

Step	Action	State Before	State After	Rendered Output
1	File loaded, 'use client' directive read	No state	No state	Button with text 'Count: 0' rendered
2	User clicks button	count = 0	count = 1	Button text updates to 'Count: 1'
3	User clicks button again	count = 1	count = 2	Button text updates to 'Count: 2'
4	No further clicks	count = 2	count = 2	Button text remains 'Count: 2'

💡 No more user interaction; component state stable.

Variable Tracker

Variable	Start	After 1	After 2	Final
count	0	1	2	2

Key Moments - 2 Insights

Why do we need to put 'use client' at the top of the file?

Because Next.js uses this directive to know the component must run on the client, enabling hooks like useState. Without it, the component is treated as server-only and hooks won't work (see execution_table step 1).

What happens if we omit 'use client' but still use useState?

Next.js will throw an error or ignore the hook because the component is treated as a server component, which cannot have client-only features (refer to execution_table step 1).

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'count' after the second click?

A 2

B 1

C 0

D 3

💡 Hint

Check the 'State After' column at step 3 in the execution_table.

At which step does the button text update to 'Count: 1'?

A Step 1

B Step 3

C Step 2

D Step 4

💡 Hint

Look at the 'Rendered Output' column in the execution_table for step 2.

If we remove the 'use client' directive, what will happen when the component tries to use useState?

A The component will work normally.

B An error will occur because hooks are not allowed in server components.

C Next.js will treat it as a client component anyway.

D The component will render but without interactivity.

💡 Hint

Refer to key_moments about the importance of 'use client' directive.

Concept Snapshot

"use client" directive:
- Place at the very top of a React component file.
- Marks component as client-side in Next.js.
- Enables hooks like useState, useEffect.
- Without it, component is server-only and cannot use client features.
- Essential for interactivity in Next.js app router.

Full Transcript

The 'use client' directive in Next.js is a special comment placed at the top of a React component file. It tells Next.js to treat that component as a client component, meaning it runs in the browser and can use React hooks like useState and useEffect. Without this directive, Next.js treats the component as a server component, which cannot have client-only features. In the example, the Counter component uses 'use client' so it can keep track of a count state and update the button text when clicked. The execution table shows the state changes and how the button text updates after each click. This directive is essential for adding interactivity in Next.js apps using the app router.

Practice

1. What is the main purpose of the use client directive in Next.js?

easy

A. To enable server-side rendering for a component

B. To define API routes in Next.js

C. To import CSS styles globally

D. To mark a component to run only in the browser

Solution

1. Step 1: Understand the role of use client

   The directive tells Next.js that the component should run on the client side (browser) instead of the server.

2. Step 2: Identify when to use it

   It is used when components use React hooks or browser-specific APIs that require client-side execution.

3. Final Answer:

   To mark a component to run only in the browser -> Option D

4. Quick Check:

   Client directive = run in browser [OK]

Hint: Remember: use client means browser-only code [OK]

Common Mistakes:

• Thinking it enables server-side rendering
• Using it to import styles
• Confusing it with API route setup

2. Where should the use client directive be placed in a Next.js component file?

easy

A. At the very top, before any imports or code

B. After all imports but before the component function

C. Inside the component function body

D. At the bottom of the file

Solution

1. Step 1: Recall the directive placement rule

   The use client directive must be the first line in the file to be recognized properly.

2. Step 2: Understand why placement matters

   Placing it first ensures Next.js treats the entire file as a client component before processing imports or code.

3. Final Answer:

   At the very top, before any imports or code -> Option A

4. Quick Check:

   Directive first line = correct placement [OK]

Hint: Always put use client as the first line [OK]

Common Mistakes:

• Placing it inside the component function
• Putting it after imports
• Adding it at the file end

3. Given this Next.js component code, what will happen when it is rendered?

"use client";
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>Clicked {count} times</button>
  );
}

medium

A. The button will display and increment the count on clicks

B. The component will throw a syntax error due to missing quotes

C. The count will not update because use client is missing

D. The component will render but the button won't respond to clicks

Solution

1. Step 1: Check for use client directive

   The directive is present as the first line, so this is a client component that can use hooks.

2. Step 2: Analyze the useState hook usage

   The useState hook manages the count state, and the button updates it on click, so the count increments correctly.

3. Final Answer:

   The button will display and increment the count on clicks -> Option A

4. Quick Check:

   Client directive + useState = interactive button [OK]

Hint: If use client is present, hooks work normally [OK]

Common Mistakes:

• Assuming missing quotes cause syntax error
• Thinking use client is missing
• Believing button won't update state

4. Identify the error in this Next.js component:

import { useState } from 'react';

export default function Clicker() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>Clicked {count} times</button>
  );
}

medium

A. Invalid JSX syntax in the return statement

B. Missing use client directive at the top

C. Incorrect import statement for useState

D. State variable count is not initialized

Solution

1. Step 1: Check for use client directive

   The component uses useState hook but lacks the use client directive, which is required for client-side hooks.

2. Step 2: Verify other code parts

   Imports and JSX syntax are correct, and the state variable is initialized properly.

3. Final Answer:

   Missing use client directive at the top -> Option B

4. Quick Check:

   Hooks need use client directive [OK]

Hint: Hooks require use client directive to work [OK]

Common Mistakes:

• Ignoring the missing directive
• Thinking import is wrong
• Assuming JSX syntax error

5. You want to create a Next.js component that uses useState and also fetches data from an API on the client side using useEffect. Which is the correct way to set up this component?

hard

A. "use server"; import { useState, useEffect } from 'react'; export default function DataFetcher() { const [data, setData] = useState(null); useEffect(() => { fetch('/api/data').then(res => res.json()).then(setData); }, []); return {data ? JSON.stringify(data) : 'Loading...'}; }

B. import { useState, useEffect } from 'react'; export default function DataFetcher() { const [data, setData] = useState(null); useEffect(() => { fetch('/api/data').then(res => res.json()).then(setData); }, []); return {data ? JSON.stringify(data) : 'Loading...'}; }

C. "use client"; import { useState, useEffect } from 'react'; export default function DataFetcher() { const [data, setData] = useState(null); useEffect(() => { fetch('/api/data').then(res => res.json()).then(setData); }, []); return {data ? JSON.stringify(data) : 'Loading...'}; }

D. "use client"; import { useState } from 'react'; export default function DataFetcher() { const [data, setData] = useState(null); fetch('/api/data').then(res => res.json()).then(setData); return {data ? JSON.stringify(data) : 'Loading...'}; }

Solution

1. Step 1: Confirm client directive usage

   Since the component uses hooks (useState, useEffect) and browser APIs, it must start with "use client";.

2. Step 2: Check correct hook usage for data fetching

   Data fetching should be inside useEffect to run after render, avoiding side effects during rendering.

3. Step 3: Identify the correct option

   "use client"; import { useState, useEffect } from 'react'; export default function DataFetcher() { const [data, setData] = useState(null); useEffect(() => { fetch('/api/data').then(res => res.json()).then(setData); }, []); return
   {data ? JSON.stringify(data) : 'Loading...'}; } correctly includes the directive, imports both hooks, and uses useEffect for fetching data.

4. Final Answer:

   "use client"; with useState, useEffect, and fetch inside useEffect -> Option C

5. Quick Check:

   Client directive + useEffect fetch = correct pattern [OK]

Hint: Use "use client" and fetch inside useEffect [OK]

Common Mistakes:

• Omitting use client directive
• Fetching data outside useEffect
• Using "use server" directive incorrectly