Challenge: Streaming page
- React course
- Expert
- Lesson 31/32
- 6 min
Write a streaming page where a section loads later with Suspense.
Challenge: Streaming page
In this challenge you will write a page that streams with Suspense. A fallback is shown until the slow component is ready.
When the page opens the first HTML arrives immediately; the slow section is appended when ready. The user never waits with an empty screen; the fallback content appears while the slow section is being prepared.
Practice Write the StreamPage component
Write StreamPage. Import Suspense. Inside <Suspense fallback={<p>Loading</p>}> show <SlowFeed />. Export it.
Starter code
// Write the StreamPage component hereSample solution
import { Suspense } from 'react';
import SlowFeed from './SlowFeed';
function StreamPage() {
return (
<Suspense fallback={<p>Loading</p>}>
<SlowFeed />
</Suspense>
);
}
export default StreamPage;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 When is the Suspense fallback shown?
- When the component is ready
- Only on error
- Never
- While the component is loading Correct answer
Explanation: The fallback appears during the wait.
2 Fill in the blank: add a Suspense boundary
Question
<Suspense fallback={<p>Loading</p>}>
<____ />
</Suspense>
Answer
<Suspense fallback={<p>Loading</p>}>
<SlowFeed />
</Suspense>Explanation: A slow component goes inside Suspense.