Mounting phase in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output when this React component mounts?

Consider this React functional component using hooks. What will be displayed on the screen after it mounts?

React

import React, { useState, useEffect } from 'react';

export default function Welcome() {
  const [message, setMessage] = useState('Loading...');

  useEffect(() => {
    setMessage('Hello, friend!');
  }, []);

  return <h1>{message}</h1>;
}

A <h1></h1>

B <h1>Loading...</h1>

C Component throws an error

D <h1>Hello, friend!</h1>

💡 Hint

Think about when useEffect runs and how state updates affect rendering.

The component first renders with 'Loading...'. Then useEffect runs after mounting and updates the message to 'Hello, friend!'. This triggers a re-render showing the updated message.

❓ lifecycle

intermediate

Which React hook runs only once during the mounting phase?

In React functional components, which hook runs exactly once right after the component mounts?

A useEffect with an empty dependency array []

B useMemo

C useEffect without dependency array

D useState

💡 Hint

Think about how dependency arrays control when useEffect runs.

useEffect with an empty dependency array runs only once after the component mounts. Other hooks either run on every render or during initialization.

🔧 Debug

advanced

Why does this component cause an infinite loop during mounting?

Examine the code below. Why does it cause an infinite loop when the component mounts?

React

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    setCount(count + 1);
  });

  return <p>{count}</p>;
}

A Because useEffect runs after every render and updates state without dependencies, causing continuous re-renders

B Because setCount is called before the component mounts

C Because useState is used incorrectly without initial value

D Because the component returns a paragraph instead of a div

💡 Hint

Look at the useEffect dependencies and what triggers re-renders.

Without a dependency array, useEffect runs after every render. Inside it, setCount updates state, causing another render, creating an infinite loop.

📝 Syntax

advanced

Which option correctly uses useEffect to run code only once on mount?

Select the code snippet that correctly runs the effect only once when the component mounts.

A useEffect(() => { console.log('Mounted'); });

B useEffect(() => { console.log('Mounted'); }, [{}]);

C useEffect(() => { console.log('Mounted'); }, []);

D useEffect(() => { console.log('Mounted'); }, null);

💡 Hint

Remember how dependency arrays control effect execution.

Only an empty array as the second argument makes useEffect run once after mounting. Omitting it or using other values causes different behaviors.

❓ state_output

expert

What is the final rendered output after mounting this component?

Analyze this React component. What will be displayed after it mounts?

React

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    setCount(c => c + 1);
    setCount(c => c + 1);
  }, []);

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

A <div>0</div>

B <div>2</div>

C <div>1</div>

D Component throws an error

💡 Hint

Consider how React batches state updates with functional updates inside useEffect.

Both setCount calls use functional updates, so React applies them in order, resulting in count increasing by 2 after mounting.