How to implement lazy loading in React Router
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Lazy loading routes in React applications reduces initial bundle size and improves performance by loading components only when they’re needed.
As the creator of CoreUI, a widely used open-source UI library, I’ve implemented lazy loading in countless React admin dashboards and large-scale applications.
From my 25 years of experience in web development and 11 years with React, the most effective approach is to use React.lazy() with Suspense for dynamic imports.
This pattern provides automatic code splitting and seamless loading states.
Use React.lazy() with dynamic imports and wrap routes in Suspense for automatic code splitting.
import { lazy, Suspense } from 'react'
import { Routes, Route } from 'react-router-dom'
const Dashboard = lazy(() => import('./pages/Dashboard'))
const Profile = lazy(() => import('./pages/Profile'))
const Settings = lazy(() => import('./pages/Settings'))
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<Routes>
<Route path='/dashboard' element={<Dashboard />} />
<Route path='/profile' element={<Profile />} />
<Route path='/settings' element={<Settings />} />
</Routes>
</Suspense>
)
}
The lazy() function takes a function that returns a dynamic import() statement, creating separate bundles for each component. Suspense wraps the routes and displays a fallback UI while components are loading. Each lazy-loaded component becomes a separate chunk that’s downloaded only when the user navigates to that route. The fallback prop can be any React component, from simple loading text to sophisticated loading spinners.
This is the same lazy loading strategy we use in CoreUI React admin templates to optimize large dashboard applications. For better loading states, create reusable loading components that match your application’s design system instead of basic text fallbacks.
