From b62f851e64066770e7e7929372ced460a1784364 Mon Sep 17 00:00:00 2001
From: Giamir Buoncristiani <giamir@thoughtworks.com>
Date: Sun, 26 Mar 2017 17:24:26 +0100
Subject: [PATCH 1/2] Add a button to switch from Fiber with time-slicing to
 Fiber without it

---
 examples/fiber/index.html | 34 +++++++++++++++++++++++++---------
 1 file changed, 25 insertions(+), 9 deletions(-)

diff --git a/examples/fiber/index.html b/examples/fiber/index.html
index 7a56ca0b9d..a62f2bfcaf 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.toogleTimeSlicing = this.toogleTimeSlicing.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 => ({ ...state, seconds: (state.seconds % 10) + 1 }));
+            });
+          } else {
+            // Update is not time-sliced. Causes demo to stutter.
+            this.setState(state => ({ ...state, seconds: (state.seconds % 10) + 1 }));
+          }
+        }
+        toogleTimeSlicing() {
+          this.setState(state => ({ ...state, useTimeSlicing: !state.useTimeSlicing}));
         }
         componentWillUnmount() {
           clearInterval(this.intervalID);
@@ -147,11 +160,14 @@
           const scale = 1 + (t > 5 ? 10 - t : t) / 10;
           const transform = 'scaleX(' + (scale / 2.1) + ') scaleY(0.7) translateZ(0.1px)';
           return (
-            <div style={{ ...containerStyle, transform }}>
-              <div>
-                <SierpinskiTriangle x={0} y={0} s={1000}>
-                  {this.state.seconds}
-                </SierpinskiTriangle>
+            <div>
+              <button onClick={this.toogleTimeSlicing}>Turn { this.state.useTimeSlicing ? 'OFF' : 'ON' } Time Slicing</button>
+              <div style={{ ...containerStyle, transform }}>
+                <div>
+                  <SierpinskiTriangle x={0} y={0} s={1000}>
+                    {this.state.seconds}
+                  </SierpinskiTriangle>
+                </div>
               </div>
             </div>
           );

From f6a64cad5dee29b50a2284e52aed353e7e7a5ee4 Mon Sep 17 00:00:00 2001
From: Andrew Clark <acdlite@fb.com>
Date: Mon, 27 Mar 2017 12:48:05 -0700
Subject: [PATCH 2/2] Use radio buttons for toggle

---
 examples/fiber/index.html | 48 +++++++++++++++++++++++++++++++++------
 1 file changed, 41 insertions(+), 7 deletions(-)

diff --git a/examples/fiber/index.html b/examples/fiber/index.html
index a62f2bfcaf..0d8ac00029 100644
--- a/examples/fiber/index.html
+++ b/examples/fiber/index.html
@@ -128,10 +128,10 @@
           super();
           this.state = {
             seconds: 0,
-            useTimeSlicing: true
+            useTimeSlicing: true,
           };
           this.tick = this.tick.bind(this);
-          this.toogleTimeSlicing = this.toogleTimeSlicing.bind(this);
+          this.onTimeSlicingChange = this.onTimeSlicingChange.bind(this);
         }
         componentDidMount() {
           this.intervalID = setInterval(this.tick, 1000);
@@ -140,15 +140,15 @@
           if (this.state.useTimeSlicing) {
             // Update is time-sliced.
             ReactDOMFiber.unstable_deferredUpdates(() => {
-              this.setState(state => ({ ...state, seconds: (state.seconds % 10) + 1 }));
+              this.setState(state => ({ seconds: (state.seconds % 10) + 1 }));
             });
           } else {
             // Update is not time-sliced. Causes demo to stutter.
-            this.setState(state => ({ ...state, seconds: (state.seconds % 10) + 1 }));
+            this.setState(state => ({ seconds: (state.seconds % 10) + 1 }));
           }
         }
-        toogleTimeSlicing() {
-          this.setState(state => ({ ...state, useTimeSlicing: !state.useTimeSlicing}));
+        onTimeSlicingChange(value) {
+          this.setState(() => ({ useTimeSlicing: value }));
         }
         componentWillUnmount() {
           clearInterval(this.intervalID);
@@ -161,7 +161,16 @@
           const transform = 'scaleX(' + (scale / 2.1) + ') scaleY(0.7) translateZ(0.1px)';
           return (
             <div>
-              <button onClick={this.toogleTimeSlicing}>Turn { this.state.useTimeSlicing ? 'OFF' : 'ON' } Time Slicing</button>
+              <div>
+                <h3>Time-slicing</h3>
+                <p>Toggle this and observe the effect</p>
+                <Toggle
+                  onLabel="On"
+                  offLabel="Off"
+                  onChange={this.onTimeSlicingChange}
+                  value={this.state.useTimeSlicing}
+                />
+              </div>
               <div style={{ ...containerStyle, transform }}>
                 <div>
                   <SierpinskiTriangle x={0} y={0} s={1000}>
@@ -174,6 +183,31 @@
         }
       }
 
+      class Toggle extends React.Component {
+        constructor(props) {
+          super();
+          this.onChange = this.onChange.bind(this);
+        }
+        onChange(event) {
+          this.props.onChange(event.target.value === 'on');
+        }
+        render() {
+          const value = this.props.value;
+          return (
+            <label onChange={this.onChange}>
+              <label>
+                {this.props.onLabel}
+                <input type="radio" name="value" value="on" checked={value} />
+              </label>
+              <label>
+                {this.props.offLabel}
+                <input type="radio" name="value" value="off" checked={!value} />
+              </label>
+            </label>
+          );
+        }
+      }
+
       var start = new Date().getTime();
       function update() {
         ReactDOMFiber.render(