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.

Practice

1. Which of the following is the main reason to use a client component in Next.js?

easy

A. To make parts of the app interactive and respond to user actions

B. To improve server-side rendering speed

C. To reduce the size of the JavaScript bundle sent to the browser

D. To fetch data from the database on the server

Solution

1. Step 1: Understand client components purpose

   Client components run in the browser and handle interactivity like clicks and animations.

2. Step 2: Compare options with this purpose

   Only To make parts of the app interactive and respond to user actions matches making the app interactive and responding to user actions.

3. Final Answer:

   To make parts of the app interactive and respond to user actions -> Option A

4. Quick Check:

   Client components = interactivity [OK]

Hint: Client components run in browser for interactivity [OK]

Common Mistakes:

• Thinking client components improve server rendering
• Confusing client components with server data fetching
• Believing client components reduce bundle size

2. Which is the correct way to mark a Next.js component as a client component?

easy

A. Wrap the component in <Client></Client> tags

B. Name the file with a .client.js extension

C. Add "use client"; at the top of the file

D. Add client: true in the component props

Solution

1. Step 1: Recall Next.js client component syntax

   Next.js requires "use client"; at the top of the file to mark it as a client component.

2. Step 2: Check other options

   Options A, C, and D are not valid Next.js syntax for client components.

3. Final Answer:

   Add "use client"; at the top of the file -> Option C

4. Quick Check:

   Client component marker = "use client"; [OK]

Hint: Remember: "use client"; at file top marks client component [OK]

Common Mistakes:

• Trying to use special tags to mark client components
• Using file extensions to indicate client components
• Passing props to mark client components

3. What will happen if you try to use useState in a Next.js server component without marking it as a client component?

medium

A. You will get a runtime error because hooks like useState only work in client components

B. The state will be shared across all users

C. The app will render normally without errors

D. The component will automatically become a client component

Solution

1. Step 1: Understand hook usage rules

   Hooks like useState only work in client components because they run in the browser.

2. Step 2: Check behavior in server components

   If you use useState in a server component without "use client" directive, Next.js throws a runtime error.

3. Final Answer:

   You will get a runtime error because hooks like useState only work in client components -> Option A

4. Quick Check:

   useState in server component = runtime error [OK]

Hint: Hooks need client components or error occurs [OK]

Common Mistakes:

• Assuming hooks work in server components
• Thinking state is shared globally without errors
• Believing components auto-switch to client

4. You wrote a Next.js component with "use client"; but forgot to import useState from React. What will happen?

medium

A. The component will render but state updates won't work

B. The component will work fine without errors

C. Next.js will automatically import useState for you

D. You will get a ReferenceError because useState is not defined

Solution

1. Step 1: Check import requirements for hooks

   Hooks like useState must be explicitly imported from React to be used.

2. Step 2: Analyze missing import effect

   Without importing, JavaScript throws a ReferenceError because useState is undefined.

3. Final Answer:

   You will get a ReferenceError because useState is not defined -> Option D

4. Quick Check:

   Missing import useState = ReferenceError [OK]

Hint: Always import hooks before using them [OK]

Common Mistakes:

• Assuming Next.js auto-imports React hooks
• Ignoring import errors thinking component still works
• Confusing runtime errors with silent failures

5. You have a Next.js app with a server component that fetches data and a button that updates UI state on click. How should you organize components?

hard

A. Make the whole component a client component to handle data fetching and button state

B. Keep data fetching in a server component and create a separate client component for the button with state

C. Use only server components and handle button clicks with server actions

D. Fetch data in the client component and handle button state in the server component

Solution

1. Step 1: Separate concerns for performance and interactivity

   Server components are best for data fetching; client components handle interactivity like button clicks.

2. Step 2: Organize components accordingly

   Keep data fetching in server component and create a small client component for the button with state and event handlers.

3. Final Answer:

   Keep data fetching in a server component and create a separate client component for the button with state -> Option B

4. Quick Check:

   Server fetch + client interactivity = separate components [OK]

Hint: Use server for data, client for interactivity [OK]

Common Mistakes:

• Making entire component client causing slower loads
• Trying to handle UI state in server components
• Fetching data in client causing unnecessary delays