njustice4all / suspense-experimental-github-demo

Sample project built with Suspense to demonstrate render-as-you-fetch

Home Page:https://reactjs.org/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense.html

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Suspense Demo for Library Authors

⚠️ Warning: Highly Experimental ⚠️

I made this demo to complement Suspense for Data Fetching and Concurrent UI Patterns documentation. It is highly experimental and primarily aimed at library authors!

For a full explanation about this particular demo, read here. It uses a REST GitHub API with render-as-you-fetch pattern and a custom router.

A Blog Post

Joe Savona from the Relay team wrote a blog post that dives deeper into these topics: https://reactjs.org/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense.html. Check it out!

A Better Demo

This demo took me a few hours and it's pretty rough. Its goal was to show one possible way to integrate Suspense with REST APIs without losing benefits of render-as-you-fetch paradigm.

After I published this, I realized that the Relay team has already built a more detailed demo here with cool features such as preloading on link hover--and its router is not even technically tied to Relay! So you might want to check out that one and compare them.

We plan to unify these demos to use shared infrastructure in the near term so the similarities and differences are more obvious.

About

Sample project built with Suspense to demonstrate render-as-you-fetch

https://reactjs.org/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense.html

License:MIT License


Languages

Language:JavaScript 80.3%Language:HTML 11.0%Language:CSS 8.7%