Concurrent React enables interruptible rendering, allowing React to pause low-priority work for urgent updates. Suspense handles async loading states declaratively. useTransition marks updates as non-urgent, and useDeferredValue defers expensive re-renders.
Concurrent Rendering:
Suspense:
useTransition:
useDeferredValue:
import { Suspense, lazy } from 'react';
// Lazy load component
const Dashboard = lazy(() => import('./Dashboard'));
const Settings = lazy(() => import('./Settings'));
function App() {
const [page, setPage] = useState('dashboard');
return (
<div>
<nav>
<button onClick={() => setPage('dashboard')}>Dashboard</button>
<button onClick={() => setPage('settings')}>Settings</button>
</nav>
{/* Suspense shows fallback while lazy component loads */}
<Suspense fallback={<div>Loading...</div>}>
{page === 'dashboard' ? <Dashboard /> : <Settings />}
</Suspense>
</div>
);
}
// Nested Suspense for granular loading
function App() {
return (
<Suspense fallback={<PageSkeleton />}>
<Header />
<Suspense fallback={<SidebarSkeleton />}>
<Sidebar />
</Suspense>
<Suspense fallback={<ContentSkeleton />}>
<MainContent />
</Suspense>
</Suspense>
);
}