Client component boundaries in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a Server Component tries to use useState?

Consider a Next.js Server Component that includes the following code snippet:

import { useState } from 'react';

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

What will be the result when this component is rendered?

NextJS

import { useState } from 'react';

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

A The component renders correctly and the button updates the count on click.

B The component renders with count always 0 and no errors.

C The component renders but the button click does not update the count.

D The component throws a runtime error because useState cannot be used in Server Components.

💡 Hint

Remember that useState is a React hook meant for client-side interactivity.

Server Components in Next.js run on the server and do not support React hooks like useState that require client-side interactivity. Using useState in a Server Component causes a runtime error.

📝 Syntax

intermediate

Identify the correct way to mark a Client Component in Next.js

Which of the following code snippets correctly marks a React component as a Client Component in Next.js?

A export default function MyComponent() { return <div>Hello</div>; }\n"use client";

B "use client";\nexport default function MyComponent() { return <div>Hello</div>; }

C export default function MyComponent() { return <div>Hello</div>; } // use client

D /* use client */\nexport default function MyComponent() { return <div>Hello</div>; }

💡 Hint

The 'use client' directive must be the very first line in the file.

In Next.js, to mark a component as a Client Component, you must add the directive 'use client' as the first line of the file before any imports or code.

❓ state_output

advanced

What is the output of nested Client and Server Components with state?

Given the following Next.js components:

// ServerComp.jsx
export default function ServerComp() {
  return ;
}

// ClientComp.jsx
'use client';
import { useState } from 'react';
export default function ClientComp() {
  const [count, setCount] = useState(0);
  return ;
}

What will the user see and experience when ServerComp is rendered?

NextJS

// ServerComp.jsx
export default function ServerComp() {
  return <ClientComp />;
}

// ClientComp.jsx
'use client';
import { useState } from 'react';
export default function ClientComp() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

A The button displays 'Count: 0' and increments the count on each click.

B The button displays 'Count: 0' but clicking does not change the count.

C The component throws an error because ServerComp cannot render ClientComp.

D The button never renders because ClientComp is ignored inside ServerComp.

💡 Hint

Client Components can be nested inside Server Components to enable interactivity.

Server Components can render Client Components. The Client Component manages its own state and interactivity, so the button updates the count on click.

🔧 Debug

advanced

Why does this Client Component fail to hydrate properly?

You have this Client Component in Next.js:

'use client';
import { useState, useEffect } from 'react';

export default function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const id = setInterval(() => setSeconds(s => s + 1), 1000);
    return () => clearInterval(id);
  }, []);

  return 
Seconds: {seconds}
;
}

When rendered inside a Server Component, the timer does not update and the console shows a hydration mismatch warning. What is the most likely cause?

NextJS

'use client';
import { useState, useEffect } from 'react';

export default function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const id = setInterval(() => setSeconds(s => s + 1), 1000);
    return () => clearInterval(id);
  }, []);

  return <div>Seconds: {seconds}</div>;
}

A The setInterval callback is not cleared properly, causing infinite re-renders.

B The useEffect hook is not allowed in Client Components, causing hydration errors.

C The Server Component renders the Timer with initial seconds 0, but the client re-renders with a different initial state causing mismatch.

D The Timer component is missing a 'use server' directive, so hydration fails.

💡 Hint

Hydration mismatch often happens when server and client render different initial outputs.

The Server Component renders the Timer with seconds 0. On the client, useState initializes seconds to 0 again, but if the server output differs or the client state changes immediately, React warns about hydration mismatch. The code is correct but initial state must be consistent.

🧠 Conceptual

expert

Which statement best describes Client Component boundaries in Next.js?

Select the statement that correctly explains how Client Components and Server Components interact in Next.js 14+.

A Server Components can render Client Components, but Client Components cannot render Server Components inside them.

B Client Components and Server Components can be freely nested in any order without restrictions.

C Server Components and Client Components must be in separate folders and cannot be imported across boundaries.

D Client Components can only be rendered inside other Client Components; Server Components cannot include Client Components.

💡 Hint

Think about which component type can include the other.

In Next.js, Server Components can include Client Components to add interactivity, but Client Components cannot include Server Components because Server Components run only on the server and Client Components run on the client.