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.