Skip to content

Instantly share code, notes, and snippets.

@julianburr
Last active August 27, 2019 09:48
Show Gist options
  • Save julianburr/9e3b680a50d3869da0a62e74ebaceda8 to your computer and use it in GitHub Desktop.
Save julianburr/9e3b680a50d3869da0a62e74ebaceda8 to your computer and use it in GitHub Desktop.
Why Suspense Will Be a Game Changer - Suspense Boundaries
class App extends Component {
render () {
return (
<Suspense fallback={<p>Loading...</p>}>
<DeepNesting>
<ThereMightBeSeveralAsyncComponentsHere />
</DeepNesting>
</Suspense>
);
}
}
// We can also be very specific with multiple boundaries
// They don't need to know what components might be suspending
// their render or why, they just catch whatever bubbles up and
// handle it as intended
class App extends Component {
render () {
return (
<Suspense fallback={<p>Loading...</p>}>
<DeepNesting>
<MaybeSomeAsycComponent />
<Suspense fallback={<p>Loading content...</p>}>
<ThereMightBeSeveralAsyncComponentsHere />
</Suspense>
<Suspense fallback={<p>Loading footer...</p>}>
<DeeplyNestedFooterTree />
</Suspense>
</DeepNesting>
</Suspense>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment