Upgrade a Component to Use Suspense in React 18 in 5 Minutes
If you are going to truly upgrade your React 16 or 17 apps to React 18 you will want to use Suspense. That is, to take advantage of the new React 18 Concurrent Mode, you’ll need to use the most important new feature in the release, and that’s Suspense.
TL;DR Watch the Video
The old style where you would first get the data by using something like a fetch call inside useEffect, then render the JSX all in the same component no longer works. Suspense requires everything inside the new Suspense tags includes the generation of a promise return (that’s how Suspense actually works with fallback url’s. There is not a loading state to worry about (even if you want to worry about it.
Easier to show in code. Here is the final Suspense code in React 18:
And here is the code prior to updating to React 18:
Stay tuned for my course from Pluralsight all about what’s new in React 18!
Stay safe … Regards, -Peter