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.