Fix time slicing fixture (facebook#13305)

* Fix time slicing fixture

* Remove unused option

Author: gaearon

fixtures/unstable-async/time-slicing/src/index.js

@@ -1,4 +1,4 @@
-import React, {Component, PureComponent, unstable_AsyncMode} from 'react';
+import React, {PureComponent, unstable_AsyncMode} from 'react';
 import {flushSync, render, unstable_deferredUpdates} from 'react-dom';
 import _ from 'lodash';
 import Charts from './Charts';
@@ -64,9 +64,12 @@ class App extends PureComponent {
     }
     this._ignoreClick = true;
 
-    unstable_deferredUpdates(() => {
-      this.setState({showDemo: true}, () => {
-        this._ignoreClick = false;
+    // TODO: needing setTimeout here seems like a React bug.
+    setTimeout(() => {
+      unstable_deferredUpdates(() => {
+        this.setState({showDemo: true}, () => {
+          this._ignoreClick = false;
+        });
       });
     });
   };
@@ -79,15 +82,13 @@ class App extends PureComponent {
     }
   }, 1000);
 
-  renderOption(strategy, label, enabled) {
+  renderOption(strategy, label) {
     const {strategy: currentStrategy} = this.state;
     return (
       <label
-        className={strategy === currentStrategy ? 'selected' : null}
-        style={{opacity: enabled ? 1 : 0.5}}>
+        className={strategy === currentStrategy ? 'selected' : null}>
         <input
           type="radio"
-          disabled={!enabled}
           checked={strategy === currentStrategy}
           onChange={() => this.setState({strategy})}
         />
@@ -107,8 +108,11 @@ class App extends PureComponent {
         this.debouncedHandleChange(value);
         break;
       case 'async':
-        unstable_deferredUpdates(() => {
-          this.setState({value});
+        // TODO: needing setTimeout here seems like a React bug.
+        setTimeout(() => {
+          unstable_deferredUpdates(() => {
+            this.setState({value});
+          });
         });
         break;
       default:
@@ -124,13 +128,9 @@ class App extends PureComponent {
     return (
       <div className="container">
         <div className="rendering">
-          {this.renderOption('sync', 'Synchronous', true)}
-          {this.renderOption('debounced', 'Debounced', true)}
-          {this.renderOption(
-            'async',
-            'Asynchronous',
-            false
-          ) /* TODO Fix async demo and re-enable */}
+          {this.renderOption('sync', 'Synchronous')}
+          {this.renderOption('debounced', 'Debounced')}
+          {this.renderOption('async', 'Asynchronous')}
         </div>
         <input
           className={'input ' + this.state.strategy}