[TOC] ## Suspense 允許在子組件完成加載前展示后備方案。 - 由于一個普通的組件不支持 await/async 語法 ``` <Suspense fallback={<Loading />}> <SomeComponent /> </Suspense> ``` ## 示例 ``` async function SuspendedApp() { await sleep(1000); return <div>函數組件</div> } export default function Demo() { const [a, setA] = useState('a'); const b = useDeferredValue(a); return <div> <Suspense fallback={<div>loading</div>}> <SuspendedApp /> </Suspense> <button onClick={() => setA('b')}>change</button> </div> } // add sleep function function sleep(ms: number) { return new Promise((resolve) => setTimeout(resolve, ms)); } ``` > SuspendedApp 會在 1秒后顯示