CodeBlanks Logo Icon CodeBlanks
Login Register

Fallback UI

Learn to write the fallback UI shown on error.

Fallback UI

The UI shown to the user when an error is caught is called the fallback UI. It can be a simple message or include a 'try again' button.

The fallback offers a gentle explanation, not technical details. Phrases like 'Something went wrong' are common. A support link may be added if needed.

A 'try again' button resets state and re-renders; this helps with transient errors.

Fallback UI design

A good fallback UI offers three things: what happened (short message), what to do (try again or go home) and a support link if needed. Not leaving the user alone matters.

In large apps the fallback is regional: a header error shows in the header bar, a sidebar error in the sidebar. The rest of the app keeps working.

Debug info is shown only in development; it is hidden in production.

Practice Fallback UI with button

Complete the skeleton below. Write an ErrorBoundary class; if hasError is true return <h1>Error</h1> and <button onClick={() => this.setState({ hasError: false })}>Try again</button>, otherwise this.props.children. Export it.

Starter code

App.jsx
import { Component } from "react";

// Write the ErrorBoundary class here

Sample solution

App.jsx
import { Component } from "react";

class ErrorBoundary extends Component {
  state = { hasError: false };
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }
  render() {
    if (this.state.hasError) {
      return (
        <div>
          <h1>Error</h1>
          <button onClick={() => this.setState({ hasError: false })}>Try again</button>
        </div>
      );
    }
    return this.props.children;
  }
}

export default ErrorBoundary;

Questions and answers

Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.

1 What does the fallback UI show?

  • Kod listesi
  • The error stack
  • Teknik detay
  • Nazik mesaj Correct answer

Explanation: The fallback UI shows a gentle message.

2 Try again button

Question 
<button onClick={() => this.setState({ hasError: ____ })}>Tekrar dene</button>
Answer 
<button onClick={() => this.setState({ hasError: false })}>Tekrar dene</button>

Explanation: Setting hasError to false re-renders.

3 Fallback UI: match the terms

Term Meaning
Fallback UI Friendly message
Try again Resets state
hasError Error state
development Shows details

All lessons in Intermediate

1 Custom hook basics

  1. What is a custom hook?
  2. useToggle
  3. usePrevious
  4. Summary - Custom hook basics

2 Advanced custom hooks

  1. useLocalStorage
  2. useFetch
  3. useDebounce
  4. Summary - Advanced custom hooks

3 Context deep dive

  1. Context separation
  2. Context + useReducer
  3. Default value and error
  4. Summary - Context deep dive

4 useReducer pattern

  1. The reducer pattern
  2. Action types
  3. Composition
  4. Summary - useReducer pattern

5 Cart management

  1. Project: Cart management
  2. Cart reducer
  3. Cart context
  4. Add product UI

6 useMemo

  1. What is useMemo?
  2. Dependency control
  3. Pitfalls
  4. Summary - useMemo

7 useCallback

  1. What is useCallback?
  2. Sibling re-render
  3. useMemo vs useCallback
  4. Summary - useCallback

8 React.memo

  1. What is React.memo?
  2. Prop comparison
  3. Custom comparator
  4. Summary - React.memo

9 Performance project

  1. Project: Performance
  2. Expensive computation
  3. Stable handler
  4. Memoized list

10 Router basics

  1. What is React Router?
  2. Defining routes
  3. Link and NavLink
  4. Summary - Router basics

11 Advanced router

  1. URL parameters
  2. Nested routes
  3. Programmatic navigation
  4. Summary - Advanced router

12 Multi-page app

  1. Project: Multi-page app
  2. Layout and router
  3. List and detail
  4. Navigation and 404

13 Layout components

  1. The layout pattern
  2. Sidebar and header
  3. Layout with Outlet
  4. Summary - Layout components

14 Error boundary

  1. What is an error boundary?
  2. Class component structure
  3. Fallback UI
  4. Summary - Error boundary

15 Suspense and lazy

  1. What is React.lazy?
  2. Suspense boundary
  3. Multiple boundaries
  4. Summary - Suspense and lazy

16 Portals

  1. What is a portal?
  2. Modal example
  3. Event bubbling
  4. Summary - Portal

17 Advanced useRef

  1. useRef and computation
  2. Measuring
  3. forwardRef
  4. Summary - Advanced useRef

18 RTL tests

  1. React Testing Library
  2. render and screen
  3. Firing events
  4. Summary - RTL tests

19 Dashboard project

  1. Project: Dashboard
  2. Layout and route
  3. Stats widget
  4. Add via modal

20 Intermediate final

  1. Challenge: useFetch hook
  2. Challenge: Theme provider
  3. Challenge: Memoized list
  4. Challenge: Routed cart