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.

Practice

1. What does the mounting phase in React mean?

easy

A. When a component updates due to state change

B. When a component first appears on the screen

C. When a component is removed from the screen

D. When a component re-renders after props change

Solution

1. Step 1: Understand React component lifecycle phases

   The mounting phase is the first phase when a component is created and inserted into the DOM.

2. Step 2: Match the phase to the description

   Mounting means the component appears on screen for the first time, not updates or removal.

3. Final Answer:

   When a component first appears on the screen -> Option B

4. Quick Check:

   Mounting phase = first appearance [OK]

Hint: Mounting means first time component shows [OK]

Common Mistakes:

• Confusing mounting with updating
• Thinking mounting means removal
• Mixing mounting with re-rendering

2. Which of the following is the correct way to run code only once when a React component mounts using hooks?

easy

A. useEffect(() => { /* code */ }, [])

B. useEffect(() => { /* code */ })

C. useEffect(() => { /* code */ }, [state])

D. useEffect(() => { /* code */ }, [props])

Solution

1. Step 1: Recall useEffect dependency array usage

   Passing an empty array [] runs the effect only once on mount.

2. Step 2: Compare options

   useEffect(() => { /* code */ }, []) uses [] so runs once; others run on every render or when dependencies change.

3. Final Answer:

   useEffect(() => { /* code */ }, []) -> Option A

4. Quick Check:

   Empty array means run once on mount [OK]

Hint: Empty array in useEffect runs once on mount [OK]

Common Mistakes:

• Omitting dependency array runs effect every render
• Using state or props array runs effect multiple times
• Confusing useEffect with useState

3. What will be logged to the console when this component mounts?

function Timer() {
  React.useEffect(() => {
    console.log('Timer started');
  }, []);
  return <div>Timer</div>;
}

medium

A. Timer started every render

B. Nothing is logged

C. Timer started

D. Error: useEffect missing dependencies

Solution

1. Step 1: Analyze useEffect with empty dependency array

   The effect runs once on mount, logging 'Timer started' once.

2. Step 2: Confirm no repeated logs or errors

   No dependencies means no repeated logs; no error occurs.

3. Final Answer:

   Timer started -> Option C

4. Quick Check:

   useEffect with [] logs once on mount [OK]

Hint: Empty array means effect runs once on mount [OK]

Common Mistakes:

• Thinking it logs every render
• Expecting no logs without return
• Assuming error due to missing dependencies

4. Identify the error in this React component related to the mounting phase:

function DataFetcher() {
  React.useEffect(() => {
    fetch('/api/data')
      .then(response => response.json())
      .then(data => console.log(data));
  });
  return <div>Loading...</div>;
}

medium

A. Missing dependency array causes fetch on every render

B. fetch is called outside useEffect

C. No return statement in component

D. Cannot use fetch inside useEffect

Solution

1. Step 1: Check useEffect dependencies

   Without a dependency array, useEffect runs after every render, causing repeated fetch calls.

2. Step 2: Identify correct fix

   Adding an empty array [] runs fetch only once on mount, preventing repeated calls.

3. Final Answer:

   Missing dependency array causes fetch on every render -> Option A

4. Quick Check:

   No [] means effect runs every render [OK]

Hint: Always add [] to run effect once on mount [OK]

Common Mistakes:

• Forgetting dependency array in useEffect
• Thinking fetch outside useEffect is needed
• Assuming useEffect cannot contain async calls

5. You want to fetch user data only once when a component mounts and store it in state. Which code correctly implements this mounting phase behavior?

function UserProfile() {
  const [user, setUser] = React.useState(null);

  // Which useEffect is correct?

  A) React.useEffect(() => {
       fetch('/user')
         .then(res => res.json())
         .then(data => setUser(data));
     }, []);

  B) React.useEffect(() => {
       fetch('/user')
         .then(res => res.json())
         .then(data => setUser(data));
     });

  C) React.useEffect(() => {
       fetch('/user')
         .then(res => res.json())
         .then(data => setUser(data));
     }, [user]);

  D) React.useEffect(() => {
       fetch('/user')
         .then(res => res.json())
         .then(data => setUser(data));
     }, [setUser]);

  return user ? <div>{user.name}</div> : <div>Loading...</div>;
}

hard

A. useEffect with setUser dependency causing repeated fetch

B. useEffect without dependencies fetching every render

C. useEffect with user dependency causing infinite fetch

D. useEffect with empty array to fetch once on mount

Solution

1. Step 1: Understand useEffect dependencies for fetching

   Empty array [] runs effect once on mount; no dependencies cause repeated fetches.

2. Step 2: Analyze each option

   The useEffect with an empty dependency array fetches data only once on mount. Without any dependency array, the effect runs after every render. Depending on user causes an infinite loop since updating user triggers re-renders. Depending on setUser runs only once because setUser is stable, but it is unnecessary and may cause ESLint warnings.

3. Final Answer:

   useEffect with empty array to fetch once on mount -> Option D

4. Quick Check:

   Empty [] means fetch once on mount [OK]

Hint: Empty array in useEffect fetches once on mount [OK]

Common Mistakes:

• Leaving out dependency array causes infinite fetch
• Using state as dependency causing loops
• Misunderstanding stable functions as dependencies