Mounting phase in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the React hook used to run code during the mounting phase.

React

import React, { [1] } from 'react';

Drag options to blanks, or click blank then click option'

AuseRef

BuseState

CuseContext

DuseEffect

Attempts:

3 left

💡 Hint

Common Mistakes

Using useState instead of useEffect for running code on mount.

Confusing useRef with useEffect.

The useEffect hook runs code during the mounting phase in React functional components.

2fill in blank

medium

Complete the code to run a console log only once when the component mounts.

React

useEffect(() => {
  console.log('Component mounted');
}, [1]);

Drag options to blanks, or click blank then click option'

A[]

B[0]

C[null]

D[true]

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving the dependency array empty (undefined) causes the effect to run on every render.

Using non-empty arrays causes multiple runs.

An empty dependency array [] makes useEffect run only once when the component mounts.

3fill in blank

hard

Fix the error in the useEffect hook to avoid running the effect multiple times.

React

useEffect(() => {
  fetchData();
}, [1]);

Drag options to blanks, or click blank then click option'

A[true]

B[]

C[fetchData]

D[data]

Attempts:

3 left

💡 Hint

Common Mistakes

Adding variables that change often to the dependency array causing repeated runs.

Omitting the dependency array causing infinite loops.

Using an empty array [] ensures fetchData runs only once on mount, preventing repeated calls.

4fill in blank

hard

Fill both blanks to correctly set up a state and run an effect on mount that updates it.

React

const [count, [1]] = useState(0);

useEffect(() => {
  [2](5);
}, []);

Drag options to blanks, or click blank then click option'

AsetCount

BsetValue

Ccount

DsetNumber

Attempts:

3 left

💡 Hint

Common Mistakes

Using the state variable instead of the setter function to update state.

Using a setter function name that was not declared.

The setter function from useState is setCount. We use it inside useEffect to update the state on mount.

5fill in blank

hard

Fill all three blanks to create a component that logs on mount and cleans up on unmount.

React

import React, { [1] } from 'react';

function Logger() {
  [2](() => {
    console.log('Mounted');
    return () => {
      console.log([3]);
    };
  }, []);

  return <div>Logger Component</div>;
}

Drag options to blanks, or click blank then click option'

AuseEffect

BuseState

C'Unmounted'

D'Component unmounted'

Attempts:

3 left

💡 Hint

Common Mistakes

Using useState instead of useEffect for side effects.

Logging the wrong message in the cleanup function.

useEffect runs code on mount and can return a cleanup function that runs on unmount. The cleanup logs 'Component unmounted'.