Why state management differs in Next.js - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the hook used for state in Next.js components.

NextJS

import { [1] } from 'react';

Drag options to blanks, or click blank then click option'

AuseRef

BuseState

CuseEffect

DuseContext

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing useState with useEffect or useContext.

The useState hook is used to manage state in Next.js functional components.

2fill in blank

medium

Complete the code to create a state variable called 'count' with initial value 0.

NextJS

const [count, setCount] = [1](0);

Drag options to blanks, or click blank then click option'

AuseState

BuseContext

CuseRef

DuseEffect

Attempts:

3 left

💡 Hint

Common Mistakes

Using useEffect or useRef instead of useState.

useState initializes a state variable and a function to update it.

3fill in blank

hard

Fix the error in the code by choosing the correct way to update state in Next.js.

NextJS

setCount([1]);

Drag options to blanks, or click blank then click option'

Acount + 1

Bcount++

C++count

Dcount = count + 1

Attempts:

3 left

💡 Hint

Common Mistakes

Using increment operators like count++ which do not update state correctly.

State updates must use the setter function with the new value, not increment operators.

4fill in blank

hard

Fill both blanks to create a server component that fetches data and passes it as a prop.

NextJS

export default async function Page() {
  const data = await fetch('/api/data').then(res => res.json());
  return <ClientComponent [1]={data} [2]={data} />;
}

Drag options to blanks, or click blank then click option'

Adata

Bloading

CisLoading

Ditems

Attempts:

3 left

💡 Hint

Common Mistakes

Using unrelated prop names like loading or isLoading for fetched data.

The server component fetches data and passes it as a prop named data or items to the client component.

5fill in blank

hard

Fill all three blanks to correctly use a React client component with state and an event handler.

NextJS

import { [1] } from 'react';

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

Drag options to blanks, or click blank then click option'

AuseState

BuseEffect

C+

DuseContext

Attempts:

3 left

💡 Hint

Common Mistakes

Using useEffect instead of useState, or wrong operator like '-'.

Use useState to create state, and + to increment the count on button click.