react-async-rendering-demo

Introduction

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