Fix time slicing fixture (#13305)
* Fix time slicing fixture * Remove unused option
Dan Abramov committed
Aug 2, 2018 at 00:02 UTC
ae63110335dd1bf83188940d0209a8d58dd7cc9b
1 file changed
+17
-17
fixtures/unstable-async/time-slicing/src/index.js
+17
-17
@@ -1,4 +1,4 @@
1
-import React, {Component, PureComponent, unstable_AsyncMode} from 'react';
1
+import React, {PureComponent, unstable_AsyncMode} from 'react';
2
import {flushSync, render, unstable_deferredUpdates} from 'react-dom';
3
import _ from 'lodash';
4
import Charts from './Charts';
@@ -64,9 +64,12 @@ class App extends PureComponent {
64
}
65
this._ignoreClick = true;
66
67
- unstable_deferredUpdates(() => {
68
- this.setState({showDemo: true}, () => {
69
- this._ignoreClick = false;
67
+ // TODO: needing setTimeout here seems like a React bug.
68
+ setTimeout(() => {
69
+ unstable_deferredUpdates(() => {
70
+ this.setState({showDemo: true}, () => {
71
+ this._ignoreClick = false;
72
+ });
73
});
74
});
75
};
@@ -79,15 +82,13 @@ class App extends PureComponent {
82
}
83
}, 1000);
84
82
- renderOption(strategy, label, enabled) {
85
+ renderOption(strategy, label) {
86
const {strategy: currentStrategy} = this.state;
87
return (
88
<label
86
- className={strategy === currentStrategy ? 'selected' : null}
87
- style={{opacity: enabled ? 1 : 0.5}}>
89
+ className={strategy === currentStrategy ? 'selected' : null}>
90
<input
91
type="radio"
90
- disabled={!enabled}
92
checked={strategy === currentStrategy}
93
onChange={() => this.setState({strategy})}
94
/>
@@ -107,8 +108,11 @@ class App extends PureComponent {
108
this.debouncedHandleChange(value);
109
break;
110
case 'async':
110
- unstable_deferredUpdates(() => {
111
- this.setState({value});
111
+ // TODO: needing setTimeout here seems like a React bug.
112
+ setTimeout(() => {
113
+ unstable_deferredUpdates(() => {
114
+ this.setState({value});
115
+ });
116
});
117
break;
118
default:
@@ -124,13 +128,9 @@ class App extends PureComponent {
128
return (
129
<div className="container">
130
<div className="rendering">
127
- {this.renderOption('sync', 'Synchronous', true)}
128
- {this.renderOption('debounced', 'Debounced', true)}
129
- {this.renderOption(
130
- 'async',
131
- 'Asynchronous',
132
- false
133
- ) /* TODO Fix async demo and re-enable */}
131
+ {this.renderOption('sync', 'Synchronous')}
132
+ {this.renderOption('debounced', 'Debounced')}
133
+ {this.renderOption('async', 'Asynchronous')}
134
</div>
135
<input
136
className={'input ' + this.state.strategy}