When to use client components in NextJS - Step-by-Step Execution

Concept Flow - When to use client components

Start with Server Component

↓

Need interactivity?

No→Stay Server Component

Yes↓

Use Client Component

↓

Add useState/useEffect or event handlers

↓

Component runs in browser

↓

User interacts -> State updates -> UI updates

Decide if a component needs interactivity or browser-only features. If yes, use a client component; otherwise, keep it server-side.

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}</button>;
}

A client component with a button that updates its count on click.

Execution Table

Step	Action	State Before	State After	Component Behavior	Rendered Output
1	Component loads in browser	count = undefined	count = 0	Button shows initial count	<button>0</button>
2	User clicks button	count = 0	count = 1	State updates, component re-renders	<button>1</button>
3	User clicks button again	count = 1	count = 2	State updates, component re-renders	<button>2</button>
4	No more clicks	count = 2	count = 2	No state change, UI stable	<button>2</button>

💡 User stops interacting, no further state changes.

Variable Tracker

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

Key Moments - 3 Insights

Why do we add 'use client' at the top of the file?

Adding 'use client' tells Next.js this component runs in the browser and can use hooks like useState. See execution_table step 1 where the component loads in the browser.

What happens if we try to use useState in a server component?

Server components cannot use useState or browser hooks. They run on the server and do not handle user events. This is why we switch to client components for interactivity, as shown in the flow after 'Need interactivity? Yes'.

Does the client component run on the server at all?

No, client components run only in the browser. Server components run on the server. The client component handles user events and state updates, as shown in execution_table steps 2 and 3.

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 undefined

💡 Hint

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

At which step does the component first render with count = 0?

A Step 3

B Step 2

C Step 1

D Step 4

💡 Hint

Look at the 'Rendered Output' column in execution_table step 1.

If we remove 'use client' directive, what will happen when using useState?

A Component will still run in browser with no issues

B Component will run on server and fail to use useState

C Component will become a static HTML only

D Component will automatically become client component

💡 Hint

Refer to key_moments about 'use client' and server vs client components.

Concept Snapshot

When to use client components in Next.js:
- Add 'use client' at top to mark client component
- Use client components for interactivity (useState, useEffect, event handlers)
- Server components run on server, no state or events
- Client components run in browser and update UI on user actions
- Keep components server-side unless browser features needed

Full Transcript

In Next.js, components run either on the server or in the browser. Server components are default and good for static content. When you need interactivity like buttons that change state, you must use client components. You mark a component as client by adding 'use client' at the top. This lets you use React hooks like useState and handle user events. The component loads in the browser, initializes state, and updates UI when users interact. Without 'use client', hooks like useState will not work because server components do not run in the browser. Use client components only when needed to keep your app fast and efficient.