Fallback UI patterns in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to show a fallback UI while loading data in a React component.

React

function DataLoader() {
  const [loading, setLoading] = React.useState(true);
  return (
    <div>
      {loading ? [1] : <p>Data loaded!</p>}
    </div>
  );
}

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

A<p>Ready</p>

B<p>Done</p>

C<p>Error</p>

D<p>Loading...</p>

Attempts:

3 left

💡 Hint

Common Mistakes

Showing 'Done' or 'Ready' before data is loaded.

Leaving the fallback UI blank.

The fallback UI during loading should inform the user that data is loading, so '

Loading...

' is the correct choice.

2fill in blank

medium

Complete the code to use React Suspense with a fallback UI.

React

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <React.Suspense fallback=[1]>
      <LazyComponent />
    </React.Suspense>
  );
}

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

A<div>Loading component...</div>

B<div>Component loaded</div>

C<div>Error loading</div>

D<div>Ready</div>

Attempts:

3 left

💡 Hint

Common Mistakes

Using a message that indicates completion instead of loading.

Not providing a fallback UI.

The fallback prop in Suspense shows UI while the lazy component loads, so a loading message is correct.

3fill in blank

hard

Fix the error in the fallback UI code by completing the blank.

React

function Profile({ userId }) {
  const [user, setUser] = React.useState(null);
  React.useEffect(() => {
    fetch(`/api/user/${userId}`)
      .then(res => res.json())
      .then(data => setUser(data));
  }, [userId]);

  if (!user) {
    return [1];
  }

  return <div>{user.name}</div>;
}

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

A<p>User loaded</p>

B<p>Loading user data...</p>

C<p>Error</p>

D<p>No user</p>

Attempts:

3 left

💡 Hint

Common Mistakes

Showing 'User loaded' before data is ready.

Returning null or empty UI without feedback.

When user data is not yet loaded, showing a loading message is the correct fallback UI.

4fill in blank

hard

Fill both blanks to create a fallback UI with error handling using React error boundaries.

React

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

  static getDerivedStateFromError(error) {
    return { hasError: [1] };
  }

  render() {
    if (this.state.hasError) {
      return [2];
    }

    return this.props.children;
  }
}

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

Atrue

Bfalse

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

D<h1>All good!</h1>

Attempts:

3 left

💡 Hint

Common Mistakes

Setting hasError to false on error.

Showing a success message instead of error fallback.

When an error occurs, hasError should be true and the fallback UI should show an error message.

5fill in blank

hard

Fill all three blanks to create a Suspense fallback UI with lazy loading and error boundary.

React

const LazyWidget = React.lazy(() => import('./Widget'));

function WidgetLoader() {
  return (
    <ErrorBoundary fallback=[1]>
      <React.Suspense fallback=[2]>
        <LazyWidget />
      </React.Suspense>
    </ErrorBoundary>
  );
}

function ErrorBoundary({ fallback, children }) {
  const [hasError, setHasError] = React.useState(false);

  React.useEffect(() => {
    // Simulate error handling
  }, []);

  if (hasError) {
    return [3];
  }

  return children;
}

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

A<div>Error loading widget.</div>

B<div>Loading widget...</div>

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing loading and error messages in wrong places.

Not providing fallback UI for error boundary.

The ErrorBoundary fallback and the error UI inside it should show an error message, while Suspense fallback shows loading.