Suspense สำหรับขอบเขตข้อมูลและโค้ด

ยินดีต้อนรับ

ซัสเพนส์คืออะไร

<Suspense fallback={<Spinner />}>
  <MyComponent />
</Suspense>

ซัสเพนส์กับ React.lazy

const HeavyChart = React.lazy(() => import('./HeavyChart'));

<Suspense fallback={<p>Loading chart...</p>}>
  <HeavyChart />
</Suspense>

คอมโพเนนต์แบบขี้เกียจหลายตัวภายใต้ขอบเขตเดียว

ขอบเขตซัสเพนส์แบบซ้อนกัน

<Suspense fallback={<PageSkeleton />}>
  <Header />
  <Suspense fallback={<ChartSkeleton />}>
    <LazyChart />
  </Suspense>
</Suspense>

ซัสเพนส์กับไลบรารีข้อมูล

const { data } = useQuery({ queryKey: ['users'], queryFn: fetchUsers,
  suspense: true }); // component suspends until data is ready
// No loading check needed — data is always available here

ฮุก use() ใน React 19

import { use } from 'react';

function Profile({ userPromise }) {
  const user = use(userPromise); // suspends until resolved
  return <p>{user.name}</p>;
}

SuspenseList สำหรับการแสดงผลตามลำดับ

ซัสเพนส์ไม่ตรวจจับข้อผิดพลาด

<ErrorBoundary fallback={<Error />}>
  <Suspense fallback={<Spinner />}>
    <DataComponent />
  </Suspense>
</ErrorBoundary>

หน้าจอโครงร่างเป็นส่วนติดต่อผู้ใช้สำรอง

ตรวจสอบความเข้าใจ

สรุป

เรียนจบหลักสูตรแล้ว