Challenge - 5 Problems
Client Component Mastery
Get all challenges correct to earn this badge!
Test your skills under time pressure!
❓ component_behavior
intermediate2:00remaining
What happens when a Server Component tries to use useState?
Consider a Next.js Server Component that includes the following code snippet:
What will be the result when this component is rendered?
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>; }
Attempts:
2 left
💡 Hint
Remember that useState is a React hook meant for client-side interactivity.
✗ Incorrect
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
intermediate1:30remaining
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?
Attempts:
2 left
💡 Hint
The 'use client' directive must be the very first line in the file.
✗ Incorrect
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
advanced2:30remaining
What is the output of nested Client and Server Components with state?
Given the following Next.js components:
What will the user see and experience when ServerComp is rendered?
// ServerComp.jsx
export default function ServerComp() {
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>; }
Attempts:
2 left
💡 Hint
Client Components can be nested inside Server Components to enable interactivity.
✗ Incorrect
Server Components can render Client Components. The Client Component manages its own state and interactivity, so the button updates the count on click.
🔧 Debug
advanced2:30remaining
Why does this Client Component fail to hydrate properly?
You have this Client Component in Next.js:
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?
'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>; }
Attempts:
2 left
💡 Hint
Hydration mismatch often happens when server and client render different initial outputs.
✗ Incorrect
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
expert2:00remaining
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+.
Attempts:
2 left
💡 Hint
Think about which component type can include the other.
✗ Incorrect
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.