Adam Rackis has written an extensive article on React Suspense for CSS-Tricks:
This post is about understanding how Suspense works, what it does, and seeing how it can integrate into a real web app. We’ll look at how to integrate routing and data loading with Suspense in React.
Dmitri Pavlutin has compared the several ways to fecthing data in React.
Lifecycle methods had been for a long time the only solution to fetching. However fetching using them has problems with lots of boilerplate code, duplication, and reusability difficulties.
Fetching using hooks is a better alternative: way less boilerplate code.
Suspenseβs benefit is declarative fetching. Your components are not cluttered with fetching implementation details. Suspense is closer to the declarative nature of React itself.
Bonus points for iterating on the hooks version by extracting it to a custom hook (which could be even further abstracted to a generic fetchData hook):