Functional components in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this React functional component?

Consider this React functional component. What will it render on the screen?

React

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

A <div>Count: 1<button>Increment</button></div> initially, and count increases by 1 each click

B Component throws an error because useState is used incorrectly

C <div>Count: 0<button>Increment</button></div> initially, and count increases by 1 each click

D <div>Count: 0<button>Increment</button></div> but clicking button does not change count

💡 Hint

Remember useState initializes the state value and updates it on button click.

The component initializes count to 0. It renders the count and a button. Clicking the button calls setCount(count + 1), which updates the state and causes re-render with incremented count.

📝 Syntax

intermediate

Which option correctly defines a React functional component?

Select the option that correctly defines a React functional component named Greeting that returns a heading with 'Hello World'.

A const Greeting = () => <h1>Hello World</h1>;

B const Greeting = () => { <h1>Hello World</h1> }

C function Greeting() { <h1>Hello World</h1> }

D function Greeting() { return <h1>Hello World</h1>; }

💡 Hint

Arrow functions can return JSX directly without braces if only one expression.

Option A correctly defines a functional component using an arrow function that returns JSX directly. Option D is also valid and correctly returns JSX. Option B misses return statement. Option C misses return statement.

❓ lifecycle

advanced

What happens when useEffect has an empty dependency array in a functional component?

In a React functional component, what is the behavior of useEffect when its dependency array is empty?

React

import React, { useEffect } from 'react';

function Example() {
  useEffect(() => {
    console.log('Effect ran');
  }, []);

  return <div>Check console</div>;
}

export default Example;

A The effect runs only once after the first render

B The effect runs after every render

C The effect never runs

D The effect runs only before the component unmounts

💡 Hint

Think about how dependency arrays control when effects run.

When the dependency array is empty, useEffect runs its effect only once after the component mounts (first render). It does not run on subsequent renders.

🔧 Debug

advanced

Why does this functional component cause an error?

Identify the cause of the error in this React functional component code.

React

import React, { useState } from 'react';

function Toggle() {
  const [isOn, setIsOn] = useState(false)

  return (
    <button onClick={setIsOn(!isOn)}>
      {isOn ? 'ON' : 'OFF'}
    </button>
  );
}

export default Toggle;

A JSX syntax error due to missing parentheses

B The onClick handler calls setIsOn immediately instead of on click

C useState is missing an initial value

D The component lacks a return statement

💡 Hint

Check how the onClick handler is assigned and when the function runs.

The onClick handler is set to the result of calling setIsOn(!isOn) immediately during render, causing an error. It should be a function that calls setIsOn when clicked.

❓ state_output

expert

What is the final value of count after clicking the button twice quickly?

Given this React functional component, what will be the value of count after clicking the button twice quickly?

React

import React, { useState } from 'react';

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

  function handleClick() {
    setCount(count + 1);
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment Twice</button>
    </div>
  );
}

export default Counter;

A Count increases by 1, final value is 1

B Component throws an error due to multiple setState calls

C Count remains 0, no change

D Count increases by 2, final value is 2

💡 Hint

Remember how React batches state updates and how setState with the same value behaves.

Both setCount calls use the same stale value of count (0), so both set count to 1. The final state after both calls is 1, not 2.