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.