menu

React

A community of developers, designers and others who love React.js. ⚛️

Channels
Team

A Walkthrough of *that* React Suspense Demo

March 2, 2018 at 7:26am

A Walkthrough of *that* React Suspense Demo

March 2, 2018 at 7:26am
You know what demo I'm talking about.
So I tried to be chill about it all day since it's still an unstable API but in the end I couldn't help but do a full walkthrough of the code we have available. made the Movie Search code public. I felt a bit lost with all the thought-leading out there and little actual code in front of me so I decided to do a line-by-line walk through of all that code (I also dip a little, unsuccessfully, into the simple-cache-provider source code) to learn all the little nuances of what was demoed:
Here's what I walk through:
  • simple-cache-provider.SimpleCache - puts a cache in `createContext`
  • simple-cache-provider.createResource - which takes a promise for your data
  • How to delegate updates to a lower priority with `ReactDOM.unstable _deferredUpdates`
  • How createResource loads data asynchronously by throwing Promises (!!!)
  • React.Timeout - just gives you a boolean for flipping between children and fallback
  • How to use createResource to do async image loading (!!!)
I'm just a regular React-Joe so please forgive me if I got anything wrong, but hopefully this is helpful for people to process things. Happy to chat below or on twitter!

March 2, 2018 at 7:40am
This is great!! Thanks a lot 👍
like-fill
2
  • reply
  • like
Wow this is awesome!
like-fill
2
  • reply
  • like
good stuff
  • reply
  • like
haha thanks guys. now im worried the article is too long 🤷🏼‍honestly did it for my own learning anyway
  • reply
  • like
Bleeding edge demo with awesome analysis mate :) :thumbsup:
like-fill
1
  • reply
  • like
Thanks for this man! 💯
like-fill
1
  • reply
  • like