Event handlers in client components in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when the button is clicked?

Consider this Next.js client component. What will be the displayed output after clicking the button once?

NextJS

'use client';

import React, { useState } from 'react';

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

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

  return (
    <button onClick={handleClick} aria-label="Increment count">
      Count: {count}
    </button>
  );
}

A The button text changes to 'Count: 1' after one click.

B The button causes a runtime error when clicked.

C The button text changes to 'Count: 0' after one click.

D The button text remains 'Count: 0' even after clicking.

💡 Hint

Remember how useState updates state and triggers re-render.

Clicking the button calls handleClick, which updates the count state by adding 1. This causes the component to re-render and display the updated count.

📝 Syntax

intermediate

Which option correctly attaches an event handler in a Next.js client component?

Select the option that correctly defines a button with an onClick event handler that calls the function doSomething.

NextJS

function doSomething() {
  console.log('Clicked');
}

export default function MyButton() {
  return (
    <button /* event handler here */>Click me</button>
  );
}

A <button onClick={doSomething()}>Click me</button>

B <button onclick="doSomething()">Click me</button>

C <button onClick="doSomething()">Click me</button>

D <button onClick={doSomething}>Click me</button>

💡 Hint

In React and Next.js, event handlers are passed as functions, not strings or function calls.

Option D correctly passes the function doSomething as a reference to onClick. Options B and C use strings which are invalid in JSX. Option D calls the function immediately instead of passing it.

🔧 Debug

advanced

Why does this event handler not update the count?

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

NextJS

'use client';

import { useState } from 'react';

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

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

  return (
    <button onClick={handleClick} aria-label="Increment">
      Count: {count}
    </button>
  );
}

A The component is missing 'use client' directive.

B The event handler is not attached correctly to the button.

C Directly modifying the state variable 'count' does not trigger a re-render; use setCount instead.

D The initial state value should be a string, not a number.

💡 Hint

In React, state variables are immutable and must be updated via their setter functions.

State variables like count cannot be changed directly. The function handleClick modifies count directly, which does not cause React to re-render. The correct way is to call setCount(count + 1).

❓ state_output

advanced

What is the output after clicking the button twice quickly?

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

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} aria-label="Increment">
      Count: {count}
    </button>
  );
}

A Count: 1

B Count: 2

C Count: 0

D Count: 3

💡 Hint

React batches state updates and uses the current state value when calling setState with a value.

Both setCount(count + 1) calls use the same count value (0) because state updates are asynchronous and batched. So the count increments only by 1, not 2.

🧠 Conceptual

expert

Why must Next.js client components use 'use client' for event handlers?

Select the best explanation why event handlers in Next.js require the component to be a client component with the 'use client' directive.

A Because 'use client' automatically optimizes event handlers for server-side rendering.

B Because event handlers require JavaScript to run in the browser, and 'use client' enables client-side rendering and interactivity.

C Because Next.js disables all event handlers by default unless 'use client' is present.

D Because 'use client' allows event handlers to run on the server during initial render.

💡 Hint

Think about where event handlers run and what 'use client' enables.

Event handlers need to run in the browser to respond to user actions. The 'use client' directive tells Next.js to render the component on the client side, enabling JavaScript interactivity. Without it, components are server components and cannot have event handlers.