Fallback UI patterns in React - Mini Project: Build & Apply

Building a Fallback UI with React Suspense and Error Boundary

📖 Scenario: You are building a user profile page in a React app. Sometimes the profile data takes time to load or might fail to load. To keep the app friendly, you want to show a loading message while waiting and an error message if loading fails.

🎯 Goal: Create a React component that uses Suspense to show a loading fallback UI and an ErrorBoundary component to catch errors and show an error fallback UI.

📋 What You'll Learn

Create a simple React component called UserProfile that simulates loading user data.

Create a variable called isLoading to control loading state.

Use React.Suspense with a fallback UI showing <div>Loading user data...</div>.

Create an ErrorBoundary component that shows <div>Failed to load user data.</div> on error.

Wrap UserProfile inside ErrorBoundary and Suspense in the main app component.

💡 Why This Matters

🌍 Real World

Fallback UI patterns improve user experience by showing helpful messages during loading or errors, common in real web apps fetching data.

💼 Career

Understanding Suspense and ErrorBoundary is essential for React developers to build resilient and user-friendly interfaces.

1

Create the UserProfile component with loading simulation

Create a React functional component called UserProfile that returns <div>User data loaded.</div>. Also create a variable called isLoading and set it to true.

React

const isLoading = true;

function UserProfile() {
  // Your code here
}

Hint

Start by declaring isLoading as true. Then create a function UserProfile that returns a div with the text 'User data loaded.'

2

Add Suspense with loading fallback UI

Create a React component called App that uses React.Suspense to wrap UserProfile. Set the fallback prop of Suspense to <div>Loading user data...</div>.

React

const isLoading = true;

function UserProfile() {
  return User data loaded.;
}

function App() {
  // Your code here
}

Hint

Wrap UserProfile inside React.Suspense and provide a fallback div with the loading message.

3

Create an ErrorBoundary component for error fallback UI

Create a class component called ErrorBoundary that extends React.Component. It should have state { hasError: false }. Implement static getDerivedStateFromError() to set hasError to true. In render(), if hasError is true, return <div>Failed to load user data.</div>, else return this.props.children.

React

const isLoading = true;

function UserProfile() {
  return User data loaded.;
}

class ErrorBoundary extends React.Component {
  // Your code here
}

function App() {
  return (
    Loading user data...}>
      
    
  );
}

Hint

Create a class component with error state. Use getDerivedStateFromError to update state on error. Show error message if error happened, else show children.

4

Wrap UserProfile with ErrorBoundary and Suspense in App

Update the App component to wrap UserProfile inside ErrorBoundary and then inside React.Suspense with the same fallback UI.

React

const isLoading = true;

function UserProfile() {
  return User data loaded.;
}

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

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

  render() {
    if (this.state.hasError) {
      return Failed to load user data.;
    }
    return this.props.children;
  }
}

function App() {
  // Your code here
}

Hint

Wrap UserProfile inside ErrorBoundary, then wrap that inside React.Suspense with the loading fallback.

Practice

1. What is the main purpose of a fallback UI in React applications?

easy

A. To speed up the rendering of all components

B. To permanently replace the main UI with a different design

C. To disable user interactions during loading

D. To show a temporary interface while content is loading or an error occurs

Solution

1. Step 1: Understand fallback UI role

   Fallback UI is used to improve user experience by showing temporary content during loading or errors.

2. Step 2: Differentiate from permanent UI changes

   Fallback UI is temporary, not a permanent replacement or disabling interaction.

3. Final Answer:

   To show a temporary interface while content is loading or an error occurs -> Option D

4. Quick Check:

   Fallback UI = temporary loading/error display [OK]

Hint: Fallback UI shows temporary content during loading/errors [OK]

Common Mistakes:

• Thinking fallback UI is permanent
• Confusing fallback UI with performance optimization
• Assuming fallback UI disables all user actions

2. Which of the following is the correct way to render a fallback UI in React using conditional rendering?

easy

A. {isLoading ? <LoadingSpinner /> : <Content />}

B. {isLoading && <Content />}

C. {isLoading || <LoadingSpinner />}

D. {isLoading = <LoadingSpinner />}

Solution

1. Step 1: Review conditional rendering syntax

   Using the ternary operator ? : correctly chooses between fallback and main UI.

2. Step 2: Check each option's logic

   {isLoading ? <LoadingSpinner /> : <Content />} uses ternary correctly; B and C misuse logical operators; D uses assignment instead of comparison.

3. Final Answer:

   {isLoading ? <LoadingSpinner /> : <Content />} -> Option A

4. Quick Check:

   Ternary operator for fallback UI = {isLoading ? <LoadingSpinner /> : <Content />} [OK]

Hint: Use ternary operator for fallback UI rendering [OK]

Common Mistakes:

• Using && or || incorrectly for fallback UI
• Using assignment (=) instead of comparison
• Not providing both fallback and main UI in conditional

3. Given the code below, what will be rendered when hasError is true?

function MyComponent({ hasError, isLoading }) {
  if (hasError) {
    return <div>Error occurred</div>
  }
  if (isLoading) {
    return <div>Loading...</div>
  }
  return <div>Content loaded</div>
}

medium

A. Loading...

B. Error occurred

C. Content loaded

D. Nothing will render

Solution

1. Step 1: Check error condition first

   The component returns the error message immediately if hasError is true.

2. Step 2: Understand conditional order

   Since error check comes before loading, loading state is ignored if error exists.

3. Final Answer:

   <div>Error occurred</div> -> Option B

4. Quick Check:

   Error condition renders error UI first [OK]

Hint: Error check before loading shows error UI first [OK]

Common Mistakes:

• Assuming loading shows even if error is true
• Ignoring order of conditions
• Thinking content loads despite error

4. Identify the error in this fallback UI pattern code:

function Profile({ user }) {
  return (
    <div>
      {user ? <ProfileDetails user={user} /> : <LoadingSpinner />}
      {!user && <LoadingSpinner />}
    </div>
  )
}

medium

A. The conditional rendering syntax is invalid

B. The component will crash because user is undefined

C. The fallback UI <LoadingSpinner /> is shown twice when user is null

D. The fallback UI is missing for loading state

Solution

1. Step 1: Analyze conditional rendering logic

   The first condition shows LoadingSpinner if user is falsy.

2. Step 2: Check second condition

   The second condition shows LoadingSpinner if user is falsy, causing it to appear twice when user is falsy.

3. Final Answer:

   The fallback UI <LoadingSpinner /> is shown twice when user is null -> Option C

4. Quick Check:

   Duplicate fallback UI rendering due to conflicting conditions [OK]

Hint: Check if fallback UI appears more than once [OK]

Common Mistakes:

• Assuming fallback UI shows only once
• Confusing truthy and falsy conditions
• Ignoring duplicated components in render

5. You want to create a fallback UI that shows a spinner while data loads, an error message if loading fails, and the content once loaded. Which React pattern best handles this cleanly and accessibly?

hard

A. Use separate components for Loading, Error, and Content, and conditionally render them in order

B. Use nested ternary operators inside JSX to handle loading, error, and content states

C. Render all three components simultaneously and hide/show with CSS

D. Use a single state variable with string values and switch-case inside JSX

Solution

1. Step 1: Evaluate clarity and accessibility

   Separate components for each state improve readability and accessibility.

2. Step 2: Compare with other options

   Nested ternaries (B) reduce readability; rendering all simultaneously (C) wastes resources; switch-case in JSX (D) is less common and can be confusing.

3. Final Answer:

   Use separate components for Loading, Error, and Content, and conditionally render them in order -> Option A

4. Quick Check:

   Separate components for fallback states = Use separate components for Loading, Error, and Content, and conditionally render them in order [OK]

Hint: Separate components for each state improve clarity [OK]

Common Mistakes:

• Using nested ternaries that are hard to read
• Rendering all states at once and hiding with CSS
• Using complex switch-case inside JSX