When to use client components in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

When should you use a client component in Next.js?

In Next.js, which scenario best requires using a client component instead of a server component?

A Fetching data from a database on the server before rendering the page

B Rendering static content that never changes and does not need user interaction

C Handling user input events like clicks or form submissions directly in the component

D Generating SEO-friendly metadata for the page

💡 Hint

Think about when you need to respond to user actions immediately in the browser.

Client components are used when you need interactivity, such as handling user input events like clicks or typing. Server components are better for static or server-only tasks like data fetching or SEO metadata.

❓ component_behavior

intermediate

What happens if you use a server component to handle a button click event?

Consider a Next.js server component that tries to handle a button click event with an onClick handler. What will happen when the user clicks the button?

A The button will not respond to clicks because server components do not support client-side events

B The click event handler will cause a runtime error because server components cannot handle events

C The click event will trigger a full page reload to handle the event on the server

D The click event will be handled immediately in the browser as expected

💡 Hint

Remember where server components run and what they can do.

Server components run only on the server and cannot handle client-side events like clicks. Therefore, the button will not respond to clicks if the handler is in a server component.

📝 Syntax

advanced

Identify the correct way to mark a component as a client component in Next.js

Which of the following code snippets correctly marks a React component as a client component in Next.js 14+?

NextJS

import React from 'react';

// Component code here

A export default function MyComponent() { return <button>Click</button>; } // add client: true in next.config.js

B export const MyComponent = () => { return <button>Click</button>; } // no special directive needed

C import { client } from 'next/client';\n\nexport default client(function MyComponent() { return <button>Click</button>; });

D "use client";\n\nexport default function MyComponent() { return <button>Click</button>; }

💡 Hint

Look for the special directive that tells Next.js this is a client component.

In Next.js 14+, adding the directive "use client"; at the top of the file marks the component as a client component. Other options are either invalid or do not mark the component correctly.

❓ state_output

advanced

What is the output when a client component updates state on button click?

Given this Next.js client component code, what will be displayed after clicking the button twice?

NextJS

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

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

A Count: 2

B Count: 1

C Count: 0

D Count: undefined

💡 Hint

Each click increases the count by one starting from zero.

The component uses React's useState hook to track count. Each button click increments count by 1. After two clicks, count becomes 2 and is displayed.

🔧 Debug

expert

Why does this client component fail to update state on click?

This Next.js client component does not update the count when the button is clicked. What is the most likely cause?

NextJS

import { useState } from 'react';

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

A The onClick handler syntax is incorrect and should be onClick={setCount(count + 1)}

B The component is missing the "use client" directive at the top of the file

C useState hook cannot be used inside functional components

D React does not support updating state inside fragments <> </>

💡 Hint

Think about what tells Next.js this component runs on the client.

Without the "use client" directive, Next.js treats the component as a server component, which cannot use hooks like useState or handle client events. Adding "use client" fixes this.