Skip to content

ivan-ha/react-async-rendering-demo

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

50 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-async-rendering-demo

Introduction

screen shot 2018-06-08 at 00 40 43

React Fiber, the new core architecture was launched in React 16. It opened a new chapter in React, enable features like Async Rendering

This demo is for my sharing in HKOSCon 2018, React Async Rendering - Paradigm Shift After React Fiber

Live Demo

https://ivan-ha.github.io/react-async-rendering-demo/

Presentation Slides

https://www.slideshare.net/hangolam/react-async-rendering-102558178

Time Slicing

... to ensure that high-priority updates don’t get blocked by a low-priority update.

  • Do some rage typing in the input field under Async/Sync Mode, you should feel the difference.
  • If not, enable CPU throttling in browser's devtool.

Suspense

... for components to suspend rendering while they load async data.

  • Click on any repository name, it should have render the commit history without any spinner.
  • Try again with appending ?latency=3000 in URL.

Development

yarn
yarn start

Deploy

yarn deploy