Challenge - 5 Problems

🎖️

Client Component Interactivity Master

Get all challenges correct to earn this badge!

Test your skills under time pressure!

🧠 Conceptual

intermediate

2:00remaining

Why do client components handle interactivity in Next.js?

In Next.js, why are client components responsible for handling user interactions like clicks and form inputs?

ABecause client components are pre-rendered on the server, so they can handle interactions before the page loads.

BBecause client components only render static content and do not manage any user events.

CBecause client components run in the browser, allowing them to respond instantly to user actions without server delays.

DBecause client components do not have access to browser APIs, so they delegate interactivity to the server.

Attempts:

2 left

❓ component_behavior

intermediate

2:00remaining

What happens if a server component tries to handle a button click?

Consider a server component in Next.js that tries to handle a button click event directly. What will happen?

NextJS

export default function ServerButton() {
  return <button onClick={() => alert('Clicked!')}>Click me</button>;
}

AThe button will render but clicking it will do nothing because event handlers are ignored.

BThe button will work normally and show the alert when clicked.

CThe button will reload the page on click instead of showing the alert.

DThe code will cause a build error because server components cannot have event handlers.

Attempts:

2 left

❓ state_output

advanced

2:00remaining

How does state update in a client component affect interactivity?

In a Next.js client component, what happens to the UI when a state variable changes due to user interaction?

NextJS

import { useState } from 'react';

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

AThe UI waits for the server to send updated HTML before showing the new count.

BThe UI updates immediately in the browser to show the new count without a page reload.

CThe UI does not update because state changes are ignored in client components.

DThe UI reloads the entire page to show the updated count.

Attempts:

2 left

📝 Syntax

advanced

2:00remaining

Which code correctly marks a component as a client component in Next.js?

To enable interactivity, a component must be a client component. Which option correctly marks a React component as a client component in Next.js?

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

Bexport default function Interactive() { return <button>Click</button>; }\n"use client";

Cexport default function Interactive() { return <button>Click</button>; } // use client

D/* use client */\nexport default function Interactive() { return <button>Click</button>; }

Attempts:

2 left

🔧 Debug

expert

3:00remaining

Why does this client component fail to update on click?

Examine the following Next.js client component. Why does the count not increase when the button is clicked?

NextJS

"use client";\nimport { useState } from 'react';\n\nexport default function Counter() {\n  let count = 0;\n  const increment = () => {\n    count += 1;\n  };\n  return (\n    <button onClick={increment}>Count: {count}</button>\n  );\n}

ABecause 'count' is a regular variable and changes to it do not trigger UI updates in React.

BBecause the 'increment' function is not called when the button is clicked.

CBecause the component is missing the 'use client' directive at the top.

DBecause the button element cannot display dynamic values inside JSX.

Attempts:

2 left