State and hooks in client components in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ state_output

intermediate

What is the output after clicking the button twice?

Consider this Next.js client component using React hooks. What will be the displayed count after clicking the button two times?

NextJS

'use client';

import React, { 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: {count}
    </button>
  );
}

A Count: 1

B Count: 2

C Count: 0

D Count: 3

💡 Hint

Remember that state updates in React are asynchronous and may be batched.

Both setCount calls use the same stale value of count (0), so the count only increases by 1 after the two calls.

❓ component_behavior

intermediate

Which option correctly updates state based on previous value?

In a Next.js client component, which option correctly increments the count twice when the button is clicked?

NextJS

'use client';

import React, { useState } from 'react';

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

  function handleClick() {
    // Which option below correctly increments count twice?
  }

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

A

setCount(prev => prev + 1);
setCount(prev => prev + 1);

B

setCount(() => count + 1);
setCount(() => count + 1);

C

setCount(count++);
setCount(count++);

D

setCount(count + 1);
setCount(count + 1);

💡 Hint

Use the functional form of setState to get the latest value.

Using the updater function prev => prev + 1 ensures each update uses the latest state value, so two increments add 2.

📝 Syntax

advanced

Which option causes a syntax error in a Next.js client component?

Identify the option that will cause a syntax error when used in a Next.js client component with React hooks.

NextJS

'use client';

import React, { useState } from 'react';

export default function Example() {
  const [value, setValue] = useState(0);

  return <div>{value}</div>;
}

A const [value, setValue] = useState(0);

B const [value, setValue] = useState;

C const value, setValue = useState(0);

D ;)0(etatSesu = ]eulaVtes ,eulav[ tsnoc

💡 Hint

Check the correct syntax for array destructuring assignment.

Option C uses a comma instead of brackets for destructuring, causing a syntax error.

🔧 Debug

advanced

Why does this Next.js client component not update the displayed count?

This component does not update the count on button click. What is the cause?

NextJS

'use client';

import React, { useState } from 'react';

export default function Counter() {
  let count = 0;

  function handleClick() {
    count += 1;
  }

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

A The component is missing 'use client' directive.

B The button's onClick handler is not correctly bound to the function.

C The count variable is declared with let instead of const.

D State is not used; count is a local variable and React does not re-render on its change.

💡 Hint

React only re-renders when state or props change.

Changing a local variable does not trigger React to re-render the component, so the UI stays the same.

🧠 Conceptual

expert

What happens if you call a React hook conditionally inside a Next.js client component?

Consider this code snippet inside a Next.js client component. What is the result of calling useState inside a conditional block?

NextJS

'use client';

import React, { useState } from 'react';

export default function ConditionalHook({ flag }) {
  if (flag) {
    const [count, setCount] = useState(0);
    return <div>Count: {count}</div>;
  } else {
    return <div>No count</div>;
  }
}

A It works fine and updates state only when flag is true.

B It causes a React hook rules violation and may break the component rendering.

C It throws a syntax error because hooks cannot be inside if statements.

D It causes the component to render twice on every update.

💡 Hint

React hooks must be called unconditionally in the same order on every render.

Calling hooks conditionally breaks the rules of hooks, leading to unpredictable behavior or errors.

Practice

1. What is the main purpose of using useState in a Next.js client component?

easy

A. To fetch data from the server before rendering

B. To store and update data that changes over time within the component

C. To style the component dynamically

D. To navigate between pages automatically

Solution

1. Step 1: Understand what useState does

   useState is a React hook that allows components to keep track of data that can change, like user input or toggles.

2. Step 2: Identify the purpose in Next.js client components

   In Next.js client components, useState helps remember and update values without reloading the page.

3. Final Answer:

   To store and update data that changes over time within the component -> Option B

4. Quick Check:

   State = Remember and update data [OK]

Hint: Remember: useState stores changing data inside components [OK]

Common Mistakes:

• Thinking useState fetches server data
• Confusing useState with styling or navigation
• Forgetting useState only works in client components

2. Which of the following is the correct way to declare a state variable called count with initial value 0 in a Next.js client component?

easy

A. const [count, setCount] = useState(0);

B. const count = useState(0);

C. let count = useState(0);

D. const count = useState()[0];

Solution

1. Step 1: Recall the syntax of useState hook

   The correct syntax uses array destructuring: const [state, setState] = useState(initialValue);

2. Step 2: Match the syntax with the variable name and initial value

   For count starting at 0, it should be const [count, setCount] = useState(0);

3. Final Answer:

   const [count, setCount] = useState(0); -> Option A

4. Quick Check:

   useState syntax = [state, setState] [OK]

Hint: Use array destructuring: [value, setValue] = useState() [OK]

Common Mistakes:

• Assigning useState directly to a single variable
• Using let instead of const for state
• Not using array destructuring syntax

3. Consider this Next.js client component code:

"use client";
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
     setCount(count + 1)}>
      Count: {count}
    
  );
}

What will be displayed after clicking the button three times?

medium

A. Count: 0

B. Count: 1

C. Count: 3

D. Count: undefined

Solution

1. Step 1: Understand initial state and button click effect

   The initial count is 0. Each click calls setCount(count + 1), increasing count by 1.

2. Step 2: Calculate count after three clicks

   After 1 click: count = 1
   After 2 clicks: count = 2
   After 3 clicks: count = 3

3. Final Answer:

   Count: 3 -> Option C

4. Quick Check:

   Increment count 3 times = 3 [OK]

Hint: Each click adds 1 to count state [OK]

Common Mistakes:

• Thinking count resets on each render
• Confusing initial value with updated value
• Ignoring that setCount updates state asynchronously

4. What is wrong with this Next.js client component code?

import { useState } from 'react';

export default function Toggle() {
  const [isOn, setIsOn] = useState(false);
  return (
     setIsOn(!isOn)}>
      {isOn ? 'ON' : 'OFF'}
    
  );
}

medium

A. State variable should be declared with let

B. Incorrect use of useState syntax

C. Button onClick handler is invalid

D. Missing 'use client'; directive at the top

Solution

1. Step 1: Check for client component requirement

   Hooks like useState require the component to be a client component, which needs 'use client'; at the top.

2. Step 2: Verify code for missing directive

   The code lacks 'use client'; at the top, so it will cause an error in Next.js.

3. Final Answer:

   Missing 'use client'; directive at the top -> Option D

4. Quick Check:

   Client components need 'use client' [OK]

Hint: Always add 'use client'; on top when using hooks [OK]

Common Mistakes:

• Forgetting 'use client' directive
• Thinking useState syntax is wrong
• Assuming onClick handler is invalid

5. You want to create a Next.js client component that toggles between showing and hiding a message when a button is clicked. Which code snippet correctly implements this behavior?

hard

A. "use client";
import { useState } from 'react';

export default function ShowHide() {
const [visible, setVisible] = useState(false);
return (
<>
setVisible(!visible)}>
{visible ? 'Hide' : 'Show'} Message

{visible && Hello, this is the message!}
</>
);
}

B. "use client";
import { useState } from 'react';

export default function ShowHide() {
const visible = false;
return (
<>
(visible = !visible)}>
{visible ? 'Hide' : 'Show'} Message

{visible && Hello, this is the message!}
</>
);
}

C. import { useState } from 'react';

export default function ShowHide() {
const [visible, setVisible] = useState(false);
return (
<>
setVisible(!visible)}>
{visible ? 'Hide' : 'Show'} Message

{visible && Hello, this is the message!}
</>
);
}

D. "use client";
import { useState } from 'react';

export default function ShowHide() {
const [visible, setVisible] = useState(false);
return (
<>
setVisible(visible)}>
{visible ? 'Hide' : 'Show'} Message

{visible && Hello, this is the message!}
</>
);
}

Solution

1. Step 1: Check for 'use client' directive and useState usage

   "use client"; import { useState } from 'react'; export default function ShowHide() { const [visible, setVisible] = useState(false); return ( <> setVisible(!visible)}> {visible ? 'Hide' : 'Show'} Message {visible &&

   Hello, this is the message!

   } </> ); } correctly includes 'use client'; and uses useState to track visibility state.

2. Step 2: Verify toggle logic and rendering

   The button toggles visible state with setVisible(!visible), and the message shows only when visible is true.

3. Final Answer:

   Option A code snippet correctly implements the toggle behavior -> Option A

4. Quick Check:

   Toggle state with useState and 'use client' [OK]

Hint: Use useState and 'use client'; toggle with setVisible(!visible) [OK]

Common Mistakes:

• Not adding 'use client' directive
• Trying to change state variable directly
• Passing current state to setter without toggling