diff --git a/examples/fiber/index.html b/examples/fiber/index.html index 7a56ca0b9d..0d8ac00029 100644 --- a/examples/fiber/index.html +++ b/examples/fiber/index.html @@ -126,16 +126,29 @@ class ExampleApplication extends React.Component { constructor() { super(); - this.state = { seconds: 0 }; + this.state = { + seconds: 0, + useTimeSlicing: true, + }; this.tick = this.tick.bind(this); + this.onTimeSlicingChange = this.onTimeSlicingChange.bind(this); } componentDidMount() { this.intervalID = setInterval(this.tick, 1000); } tick() { - ReactDOMFiber.unstable_deferredUpdates(() => - this.setState(state => ({ seconds: (state.seconds % 10) + 1 })) - ); + if (this.state.useTimeSlicing) { + // Update is time-sliced. + ReactDOMFiber.unstable_deferredUpdates(() => { + this.setState(state => ({ seconds: (state.seconds % 10) + 1 })); + }); + } else { + // Update is not time-sliced. Causes demo to stutter. + this.setState(state => ({ seconds: (state.seconds % 10) + 1 })); + } + } + onTimeSlicingChange(value) { + this.setState(() => ({ useTimeSlicing: value })); } componentWillUnmount() { clearInterval(this.intervalID); @@ -147,17 +160,54 @@ const scale = 1 + (t > 5 ? 10 - t : t) / 10; const transform = 'scaleX(' + (scale / 2.1) + ') scaleY(0.7) translateZ(0.1px)'; return ( -
Toggle this and observe the effect
+