Event handlers in client components in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of event handlers in client components?

Event handlers let components respond to user actions like clicks or typing, making the app interactive.

beginner

How do you attach a click event handler to a button in a Next.js client component?

Use the onClick attribute with a function, for example: <button onClick={() => alert('Clicked!')}>Click me</button>.

intermediate

Why must client components use the use client directive when handling events?

Because event handlers need to run in the browser, the use client directive tells Next.js to make the component run on the client side.

intermediate

What is the difference between passing a function directly and calling it inside an event handler?

Passing a function like onClick={handleClick} means it runs on click. Calling it like onClick={handleClick()} runs it immediately, which is usually wrong.

intermediate

How can you prevent the default browser behavior in an event handler?

Inside the event handler, call event.preventDefault() to stop the browser's default action, like following a link or submitting a form.

Which directive must you add at the top of a Next.js component to use event handlers?

A "use event"

B "use client"

C "use strict"

D "use server"

The "use client" directive tells Next.js to run the component on the client side, enabling event handlers.

How do you correctly attach a click handler that calls a function named handleClick?

A <code>onClick="handleClick()"</code>

B <code>onClick={handleClick()}</code>

C <code>onClick={handleClick}</code>

D <code>onClick={() =&gt; handleClick}</code>

You pass the function reference without calling it: onClick={handleClick}.

What does event.preventDefault() do inside an event handler?

A Triggers the event again

B Stops the event from bubbling up

C Logs the event to the console

D Stops the browser's default action

It prevents the browser from doing its default behavior, like following a link or submitting a form.

Where do event handlers run in Next.js client components?

A In the browser (client side)

B On the server

C In the database

D In the build process

Event handlers run in the browser to respond to user actions.

Which of these is a valid way to define an event handler function inside a Next.js client component?

A const handleClick = () => { alert('Clicked!'); }

B function handleClick { alert('Clicked!'); }

C handleClick = () => alert('Clicked!')

D def handleClick(): alert('Clicked!')

The arrow function syntax with const is valid in React/Next.js components.

Explain how to add a click event handler to a button in a Next.js client component and why the "use client" directive is necessary.

Think about where the code runs and how React handles events.

Describe how to prevent a form submission from refreshing the page using an event handler in a Next.js client component.

Focus on stopping default browser behavior.