Performance, Error Handling, and Maintainable Architecture

Required tools

• Node.js (20.x LTS or newer)
• npm (10.x (bundled with Node.js))

Setup

1. Reuse the Vite + React project from an earlier lesson's lab, or run `npm create vite@latest dashboard-refactor -- --template react` for a fresh one.
2. Replace `src/App.jsx` with the oversized starter file below.
3. Run `npm run dev` and confirm the dashboard renders and searches correctly before refactoring anything.

Project structure

dashboard-refactor/
  src/
    App.jsx (oversized, to be split apart)
    ErrorBoundary.jsx (new)
    useCourseSearch.js (new, extracted hook)
    CourseList.jsx (new, extracted component)
    main.jsx

Starter files

import { useEffect, useState } from "react";

const ALL_COURSES = [
  { id: 1, title: "HTML & CSS Fundamentals" },
  { id: 2, title: "JavaScript Fundamentals" },
  { id: 3, title: "TypeScript Foundations" },
];

// Everything lives in one component: fetching, filtering, error handling,
// AND rendering -- a realistic "grew too large over time" starting point.
export default function App() {
  const [query, setQuery] = useState("");
  const [items, setItems] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    let ignore = false;
    setIsLoading(true);
    setTimeout(() => {
      if (!ignore) {
        setItems(ALL_COURSES);
        setIsLoading(false);
      }
    }, 300);
    return () => { ignore = true; };
  }, []);

  const filtered = items.filter((c) => c.title.toLowerCase().includes(query.toLowerCase()));

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p role="alert">Something went wrong.</p>;

  return (
    <div>
      <input value={query} onChange={(e) => setQuery(e.target.value)} aria-label="Search courses" />
      <ul>
        {filtered.map((c) => (
          <li key={c.id}>{c.title}</li>
        ))}
      </ul>
    </div>
  );
}

Requirements

• Fetch-and-filter logic is extracted into a custom hook (e.g. useCourseSearch), not left inline in the top-level component
• The list-rendering markup is extracted into its own component (e.g. CourseList), accepting the filtered items as a prop
• An ErrorBoundary class component wraps the dashboard, with a fallback UI distinct from the existing loading/error states
• The refactored App.jsx is substantially shorter and reads as an assembly of pieces, not a single block handling every concern

Commands to run

• Start the dev server after each refactor step to confirm nothing broke

  npm run dev

Expected behavior

After refactoring, the app behaves identically from the user's perspective (search still filters correctly, loading still shows briefly) — the refactor changes internal structure only, never behavior.

Verify it yourself

• Load the app and confirm the course list appears after the brief loading state

  Expected: Behavior matches the pre-refactor version exactly

• Type a search query and confirm filtering still works

  Expected: The list narrows to matching courses, same as before the refactor

• Temporarily throw an error inside CourseList's render (e.g. `throw new Error('test')`) to confirm the ErrorBoundary catches it

  Expected: The ErrorBoundary's fallback UI appears instead of a blank white screen or an unhandled crash; remove the test throw afterward

Troubleshooting

• The ErrorBoundary doesn't catch a thrown error — Confirm the error is thrown during RENDER (not inside a useEffect or an event handler) — error boundaries only catch rendering errors in their child tree, by design.
• After extracting useCourseSearch, the search input stops updating — Confirm the hook returns both the current query value AND a setter function, and that App.jsx's input is still wired to both.

Extension challenge

Add a componentDidCatch method to ErrorBoundary that logs the error to the console with additional context, and add a 'Try again' button to its fallback UI that resets hasError back to false.