Project 25: Chat App Interface

React Engineer

Builds on these lessons

Error Boundaries Loading States Empty States Fallback Ui Suspense Patterns

Step 1 of 4

Project

An Error Boundary

Write a class ChatErrorBoundary with static getDerivedStateFromError, catching render errors from its children and showing a fallback instead of crashing the whole app. Error boundaries are still class-only in React — there's no hook equivalent — and they only catch errors during render, not inside event handlers.

🎯 Your Task

Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!

import { Component } from "react";

class ChatErrorBoundary extends Component {
  state = { hasError: false };

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

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

export default function ChatApp() {
  return (
    <ChatErrorBoundary>
      <div>Chat messages</div>
    </ChatErrorBoundary>
  );
}

← Previous Next →