React Suspense was introduced in React 16.6. Right now (April 2021) this feature is still experimental and you should not use it in your production applications. Suspense lets you suspend component rendering until a condition is met. You can render a loading component or anything you want as a fallback of Suspense. Right now there are only two use cases for this:
- Code splitting: When you split your application and you're waiting to download a chunk of your app when a user wants to access it
- Data fetching: When you're fetching data
In both scenarios, you can render a fallback, which can normally be a loading spinner, some loading text, or even better, a placeholder skeleton.
WARNING: The new React Suspense feature is still experimental so I recommend you do not use it on production because it is not yet available in a stable release.
Introducing SWR
Stale-While-Revalidate (SWR) is a React Hook for data fetching; it is an HTTP cache invalidation...