Fallback UI patterns in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this Suspense fallback UI display initially?

Consider this React component using Suspense with a fallback UI. What will the user see first when this component renders?

React

import React, { Suspense } from 'react';
const LazyComponent = React.lazy(() => import('./LazyComponent'));

export default function App() {
  return (
    <Suspense fallback={<div>Loading content...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

A The text 'Loading content...' until LazyComponent finishes loading

B Nothing is shown until LazyComponent loads

C An error message is shown if LazyComponent fails to load

D The LazyComponent content appears immediately without fallback

💡 Hint

Think about what Suspense's fallback prop does while waiting for lazy components.

The fallback prop in Suspense shows the specified UI while the lazy component is loading. Here, it shows 'Loading content...'.

❓ state_output

intermediate

What is the output when ErrorBoundary catches an error?

Given this React component with an ErrorBoundary and fallback UI, what will be rendered if the child component throws an error?

React

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

function BuggyComponent() {
  throw new Error('Bug!');
}

export default function App() {
  return (
    <ErrorBoundary>
      <BuggyComponent />
    </ErrorBoundary>
  );
}

A The error message 'Bug!' is displayed on the screen

B The app crashes and shows a blank page

C Nothing is rendered because of the error

D <h1>Something went wrong.</h1>

💡 Hint

ErrorBoundary catches errors and shows fallback UI instead of crashing.

The ErrorBoundary catches errors in its children and renders the fallback UI <h1>Something went wrong.</h1> instead of crashing.

📝 Syntax

advanced

Which option correctly uses Suspense with a fallback UI?

Identify the correct syntax to use React Suspense with a fallback UI while loading a lazy component.

A <Suspense><LazyComp fallback={<div>Loading...</div>} /></Suspense>

B React.Suspense({ fallback: <div>Loading...</div> }, <LazyComp />)

C <Suspense fallback={<div>Loading...</div>}><LazyComp /></Suspense>

D <Suspense fallback={<div>Loading...</div>} /> <LazyComp />

💡 Hint

Suspense is a component that wraps children and takes fallback as a prop.

The correct syntax wraps the lazy component inside <Suspense fallback=...> and closes it after the children.

🔧 Debug

advanced

Why does this fallback UI never show?

This React code uses Suspense with a fallback, but the fallback UI never appears even though the lazy component takes time to load. Why?

React

import React, { Suspense } from 'react';
const LazyComp = React.lazy(() => import('./LazyComp'));

export default function App() {
  return (
    <div>
      <LazyComp />
      <Suspense fallback={<div>Loading...</div>} />
    </div>
  );
}

A Suspense must wrap the lazy component; here it is separate, so fallback never triggers

B LazyComp is not lazy loaded properly, so fallback is skipped

C Fallback UI only shows on errors, not loading

D Suspense fallback must be a string, not a React element

💡 Hint

Check how Suspense and lazy components are nested.

Suspense must wrap the lazy component to catch its loading state. Here, Suspense is separate, so fallback UI never shows.

🧠 Conceptual

expert

What is the main benefit of using fallback UI patterns in React?

Why do React developers use fallback UI patterns like Suspense fallback or ErrorBoundary fallback in their apps?

A To automatically retry loading components multiple times without user action

B To improve user experience by showing meaningful UI during loading or errors instead of blank or broken screens

C To reduce the bundle size by removing components that fail to load

D To prevent React from rendering any UI until all components are fully loaded

💡 Hint

Think about what users see when parts of the app are slow or broken.

Fallback UI patterns help keep the app responsive and friendly by showing loading messages or error notices instead of blank or crashed screens.