Since React 18 is coming i'm compiling some tweets exploring suspense, a groundbreaking new feature.
Suspense allows components to handle async tasks, while the parent control loading, errors and fallbacks. It essentially solves async in front end.
Here are some use cases →
Suspense allows components to handle async tasks, while the parent control loading, errors and fallbacks. It essentially solves async in front end.
Here are some use cases →
Example #1 — You load an async asset (fetch, wasm, parsing, workers, ...). When it's finished you want to execute a specific action, for instance zoom in.
https://twitter.com/0xca0a/status/1301249675371196417
Since <Model /> is async and <ZoomIn />, which is not, share the same suspense boundary, <ZoomIn /> will not execute before <Model /> is ready.
This is literally all you have to do, drop a component in. ✨
This is literally all you have to do, drop a component in. ✨
Example #2 — One component is async, while the other needs to operate upon the result of it.
Same thing, if both share the same suspense boundary useEffect in the operating component is guaranteed to be able to access the async reference.
Same thing, if both share the same suspense boundary useEffect in the operating component is guaranteed to be able to access the async reference.
https://twitter.com/0xca0a/status/1287009226242564096
Example #3 — You want fallbacks. This would be hard already, but imagine going through variants, where you load a lesser thing first before switching to hi-res. Sketchfab does that for instance .
This is trivial with suspense because you can nest it.
This is trivial with suspense because you can nest it.
https://twitter.com/0xca0a/status/1358789334145658882
Example #4 — What if you load something but you want to hold on to the current thing on screen, you want users to be able to continue interacting with it until the new thing comes in.
With suspense you can define transitions that make this so easy.
With suspense you can define transitions that make this so easy.
https://twitter.com/0xca0a/status/1350214749296996353
Example #5 — You want to cache and re-use assets.
This is not even an afterthought, because suspense is built on caching. How it caches is up to the layer that controls the suspense.
This is not even an afterthought, because suspense is built on caching. How it caches is up to the layer that controls the suspense.
https://twitter.com/0xca0a/status/1381889271959855104
There might be more. But as you see, the feature can do far more than fetching data. There are some examples here that remind me of when i had to struggle with C/C++ and threads and how hard it was to do certain things, and now i can just lego compose async. 🧙♂️
• • •
Missing some Tweet in this thread? You can try to
force a refresh
