Skip to content

Instantly share code, notes, and snippets.

View maxsolovev's full-sized avatar

Max Solovev maxsolovev

  • Localrent.com
  • Tarragona, España
View GitHub Profile
@acdlite
acdlite / coordinating-async-react.md
Last active June 17, 2024 11:56
Demo: Coordinating async React with non-React views

Demo: Coordinating async React with non-React views

tl;dr I built a demo illustrating what it might look like to add async rendering to Facebook's commenting interface, while ensuring it appears on the screen simultaneous to the server-rendered story.

A key benefit of async rendering is that large updates don't block the main thread; instead, the work is spread out and performed during idle periods using cooperative scheduling.

But once you make something async, you introduce the possibility that things may appear on the screen at separate times. Especially when you're dealing with multiple UI frameworks, as is often the case at Facebook.

How do we solve this with React?

var mediaJSON = { "categories" : [ { "name" : "Movies",
"videos" : [
{ "description" : "Big Buck Bunny tells the story of a giant rabbit with a heart bigger than himself. When one sunny day three rodents rudely harass him, something snaps... and the rabbit ain't no bunny anymore! In the typical cartoon tradition he prepares the nasty rodents a comical revenge.\n\nLicensed under the Creative Commons Attribution license\nhttp://www.bigbuckbunny.org",
"sources" : [ "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" ],
"subtitle" : "By Blender Foundation",
"thumb" : "images/BigBuckBunny.jpg",
"title" : "Big Buck Bunny"
},
{ "description" : "The first Blender Open Movie from 2006",
"sources" : [ "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" ],