Use client directive in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output of this Next.js component with 'use client'?

Consider this Next.js component that uses the use client directive. What will it display when rendered?

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 The component fails to render because 'use client' is missing.

B A button showing 'Count: 0' initially and increments count on each click.

C A runtime error because 'useState' cannot be used with 'use client'.

D A static text 'Count: 0' that does not change on click.

💡 Hint

Think about what use client enables in Next.js components.

The use client directive allows the component to run on the client side, enabling React hooks like useState. This means the button will show 'Count: 0' initially and update the count on each click.

📝 Syntax

intermediate

Which option correctly applies the 'use client' directive in a Next.js component?

Choose the correct way to apply the use client directive in a Next.js component file.

A export default function MyComponent() {\n "use client";\n return <div>Hello</div>;\n}

B import React from 'react';\n"use client";\nexport default function MyComponent() { return <div>Hello</div>; }

C "use client";\nimport React from 'react';\nexport default function MyComponent() { return <div>Hello</div>; }

D import React from 'react';\nexport default function MyComponent() { return <div>"use client"; Hello</div>; }

💡 Hint

The use client directive must be the very first line in the file.

The use client directive must appear as the first line in the file before any imports or code. Only option C places it correctly.

🔧 Debug

advanced

Why does this Next.js component fail to update state without 'use client'?

Given this component code, why does the count not update when clicking the button?

NextJS

import { useState } from 'react';

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

A Because the component is rendered as a server component by default, so hooks like useState do not work.

B Because useState is not imported correctly from React.

C Because the button element does not support onClick events.

D Because the count variable is declared as a constant and cannot be updated.

💡 Hint

Think about the default rendering behavior of Next.js components without use client.

Next.js renders components as server components by default. Server components cannot use React hooks like useState. Without use client, the state update does not work.

🧠 Conceptual

advanced

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

Choose the best explanation for why Next.js uses the use client directive.

A It optimizes server-side rendering by caching component output.

B It disables React's strict mode for faster rendering.

C It automatically converts JavaScript code to TypeScript.

D It marks a component to be rendered on the client side, enabling React hooks and browser APIs.

💡 Hint

Consider what features require client-side rendering in React.

The use client directive tells Next.js to render the component on the client side. This allows use of React hooks and browser-only APIs that are not available during server rendering.

❓ state_output

expert

What is the value of 'count' after clicking the button twice in this Next.js client component?

Given this component, what will be the value of count after clicking the button two times?

NextJS

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

export default function Counter() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      Count: {count}
    </button>
  );
}

A Count will be 2 after two clicks.

B Count will be 0 because state updates are ignored.

C Count will be 1 after two clicks.

D Count will be 3 after two clicks.

💡 Hint

Remember how React batches state updates and how closures capture state values.

Each click calls handleClick once, which calls setCount(count + 1) twice. Because count is the same value in both calls, the state updates do not accumulate within one click. So one click increments count by 1. After two clicks, count is 2.

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