-
-
Save prakashsvmx/7ea41e9d9b6acb100ff31819b150cae1 to your computer and use it in GitHub Desktop.
Why Suspense Will Be a Game Changer - Suspense Boundaries
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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