React Router and Code Splitting Quiz
Four drills on declarative routing with react-router and using React.lazy plus Suspense to split bundles per route or per heavy component.
Question Bank
Medium
JavaScript
4 questions
quiz
react
design-patterns
performance-optimization
150 views
2
Define a three-route app with react-router-dom v6: /, /about, and /users/:id. Render each route inside a shared <Layout>.
Convert the heavy <Dashboard> import to a lazy import and render it behind <Suspense fallback={...}>. What does the user actually see during the load?
import Dashboard from './Dashboard';
export function Page() {
return <Dashboard />;
}What is the practical difference between route-based code splitting and component-based code splitting? When does each one win?
Read this route table and answer: with three routes lazy-loaded, what does the user pay for navigating from / to /reports for the first time, and how do you avoid a blank screen?
import { lazy, Suspense } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
const Home = lazy(() => import('./Home'));
const Settings = lazy(() => import('./Settings'));
const Reports = lazy(() => import('./Reports'));
export function App() {
return (
<BrowserRouter>
<Suspense fallback={<p>Loading...</p>}>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/settings" element={<Settings />} />
<Route path="/reports" element={<Reports />} />
</Routes>
</Suspense>
</BrowserRouter>
);
}