Update time-slicing demo (#21401)

Author: rickhanlonii

fixtures/concurrent/time-slicing/README.md

@@ -14,6 +14,18 @@ There are also known bugs and inefficiencies in master so **don't use this fixtu
 
 ## How do I run this fixture?
 
+### From npm version
+
+```
+# 1: Install fixture dependencies
+cd fixtures/unstable-async/time-slicing/
+yarn
+
+# 2: Run the app
+yarn start
+```
+
+### From React source code
 ```shell
 # 1: Build react from source
 cd /path/to/react
@@ -24,6 +36,9 @@ yarn build react-dom/index,react/index,react-cache,scheduler --type=NODE
 cd fixtures/unstable-async/time-slicing/
 yarn
 
+# 3: Copy React source code over
+yarn copy-source
+
 # 3: Run the app
 yarn start
 ```

fixtures/concurrent/time-slicing/package.json

@@ -4,13 +4,14 @@
   "private": true,
   "dependencies": {
     "glamor": "^2.20.40",
+    "react": "0.0.0-experimental-269dd6ec5",
+    "react-dom": "0.0.0-experimental-269dd6ec5",
     "react-markdown": "^3.2.0",
     "react-scripts": "^1.1.4",
     "victory": "^0.25.6"
   },
   "scripts": {
-    "prestart": "cp -r ../../../build/node_modules/* ./node_modules/",
-    "prebuild": "cp -r ../../../build/node_modules/* ./node_modules/",
+    "copy-source": "cp -r ../../../build/node_modules/* ./node_modules/",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",

fixtures/concurrent/time-slicing/src/index.css

@@ -32,16 +32,18 @@ body {
   margin-top: 20px;
   margin-bottom: 20px;
   zoom: 1.8;
+  text-align: center;
+  display: flex;
+  justify-content: space-between;
 }
 
 label {
   zoom: 1;
-  margin-right: 50px;
   font-size: 30px;
 }
 
 label.selected {
-  font-weight: bold;  
+  font-weight: bold;
 }
 
 label:nth-child(1).selected {
@@ -56,6 +58,10 @@ label:nth-child(3).selected {
   color: #61dafb;
 }
 
+input[type="radio" i]:nth-child(1) {
+  margin-left: 0;
+}
+
 .chart {
   width: 100%;
   height: 100%;

fixtures/concurrent/time-slicing/src/index.js

@@ -1,6 +1,5 @@
-import React, {PureComponent} from 'react';
-import {flushSync, createRoot} from 'react-dom';
-import Scheduler from 'scheduler';
+import React, {PureComponent, unstable_startTransition} from 'react';
+import {unstable_createRoot} from 'react-dom';
 import _ from 'lodash';
 import Charts from './Charts';
 import Clock from './Clock';
@@ -55,19 +54,17 @@ class App extends PureComponent {
       return;
     }
     if (this.state.strategy !== 'async') {
-      flushSync(() => {
-        this.setState(state => ({
-          showDemo: !state.showDemo,
-        }));
-      });
+      this.setState(state => ({
+        showDemo: !state.showDemo,
+      }));
       return;
     }
     if (this._ignoreClick) {
       return;
     }
     this._ignoreClick = true;
 
-    Scheduler.unstable_next(() => {
+    unstable_startTransition(() => {
       this.setState({showDemo: true}, () => {
         this._ignoreClick = false;
       });
@@ -76,9 +73,7 @@ class App extends PureComponent {
 
   debouncedHandleChange = _.debounce(value => {
     if (this.state.strategy === 'debounced') {
-      flushSync(() => {
-        this.setState({value: value});
-      });
+      this.setState({value: value});
     }
   }, 1000);
 
@@ -108,9 +103,9 @@ class App extends PureComponent {
         break;
       case 'async':
         // TODO: useTransition hook instead.
-        setTimeout(() => {
+        unstable_startTransition(() => {
           this.setState({value});
-        }, 0);
+        });
         break;
       default:
         break;
@@ -147,5 +142,5 @@ class App extends PureComponent {
 }
 
 const container = document.getElementById('root');
-const root = createRoot(container);
+const root = unstable_createRoot(container);
 root.render(<App />);