Default-এ, একটা React app-এর পুরো JavaScript bundle কিছু render হওয়ার আগে download হয় — app-এর এমন অংশের কোড সহ যা একজন visitor হয়তো কখনো খুলবেই না। Code-splitting bundle-কে on demand load হওয়া টুকরায় ভাঙে, আর Suspense হলো একটা টুকরা এখনো load হচ্ছে অবস্থায় React কীভাবে একটা fallback দেখায়।
একটা সাধারণ import-এর বদলে, React.lazy একটা component-কে dynamically import করে এমন একটা function নেয় — সেই import আসলে শুধু component প্রথমবার render হলেই ঘটে।
import { lazy } from 'react'
const SettingsPage = lazy(() => import('./SettingsPage'))একটা lazily-load করা component-এর উপরে কোথাও একটা <Suspense> boundary দরকার — এর fallback prop হলো component-এর কোড এখনো download হচ্ছে অবস্থায় যা দেখায়।
import { lazy, Suspense } from 'react'
const SettingsPage = lazy(() => import('./SettingsPage'))
function App() {
return (
<Suspense fallback={<p>Loading settings...</p>}>
<SettingsPage />
</Suspense>
)
}সবচেয়ে common আসল ব্যবহার: lazy-load করা component-কে (আগের lesson থেকে) React Router-এর সাথে জোড়া লাগানো, যাতে একটা route-এর কোড শুধু একজন visitor আসলে সেখানে navigate করলে download হয়।
import { lazy, Suspense } from 'react'
import { Routes, Route } from 'react-router-dom'
const Dashboard = lazy(() => import('./Dashboard'))
const Settings = lazy(() => import('./Settings'))
function App() {
return (
<Suspense fallback={<p>Loading...</p>}>
<Routes>
<Route path="/dashboard" element={<Dashboard />} />
<Route path="/settings" element={<Settings />} />
</Routes>
</Suspense>
)
}একটা একক <Suspense> এর ভেতরের প্রতিটা lazy component load শেষ না হওয়া পর্যন্ত এর fallback দেখায় — সম্পর্কিত টুকরার একটা group-কে বেশ কয়েকটা আলাদা spinner-এর বদলে একটা loading unit হিসেবে treat করার জন্য useful।
Suspense এই lesson কভার করার চেয়ে আরো এগিয়ে যায়
Suspense-এর একটা নতুন, বেশি advanced ব্যবহারও আছে — শুধু lazy component load-এ না, নিজের data fetching-এও suspend করা — কিছু data-fetching library আর React-এর নিজের নতুন API দিয়ে সমর্থিত। সেই গভীর ব্যবহার এই lesson-এর scope-এর বাইরে; code-splitting-ই ভালোভাবে-প্রতিষ্ঠিত, সর্বজনীনভাবে সমর্থিত case।