Compute benchmark props before each iteration

Fix a bug in the logic that was meant to perform component prop
computation in-between cycles.

packages/benchmarks/src/app/Benchmark/index.js

@@ -74,7 +74,7 @@ type BenchmarkPropsType = {
 };
 
 type BenchmarkStateType = {
-  getComponentProps: Function,
+  componentProps: Object,
   cycle: number,
   running: boolean
 };
@@ -100,9 +100,10 @@ export default class Benchmark extends Component<BenchmarkPropsType, BenchmarkSt
 
   constructor(props: BenchmarkPropsType, context?: {}) {
     super(props, context);
+    const cycle = 0;
     this.state = {
-      getComponentProps: props.getComponentProps,
-      cycle: 0,
+      componentProps: props.getComponentProps({ cycle }),
+      cycle,
       running: false
     };
     this._startTime = 0;
@@ -110,7 +111,7 @@ export default class Benchmark extends Component<BenchmarkPropsType, BenchmarkSt
   }
 
   componentWillReceiveProps(nextProps: BenchmarkPropsType) {
-    this.setState(state => ({ getComponentProps: nextProps.getComponentProps }));
+    this.setState(state => ({ componentProps: nextProps.getComponentProps(state.cycle) }));
   }
 
   componentWillUpdate(nextProps: BenchmarkPropsType, nextState: BenchmarkStateType) {
@@ -145,13 +146,11 @@ export default class Benchmark extends Component<BenchmarkPropsType, BenchmarkSt
 
   render() {
     const { component: Component, type } = this.props;
-    const { getComponentProps, cycle, running } = this.state;
+    const { componentProps, cycle, running } = this.state;
     if (running && shouldRecord(cycle, type)) {
       this._samples[cycle] = { start: Timing.now() };
     }
-    return running && shouldRender(cycle, type) ? (
-      <Component {...getComponentProps({ cycle })} />
-    ) : null;
+    return running && shouldRender(cycle, type) ? <Component {...componentProps} /> : null;
   }
 
   start() {
@@ -165,15 +164,16 @@ export default class Benchmark extends Component<BenchmarkPropsType, BenchmarkSt
 
     // Calculate the component props outside of the time recording (render)
     // so that it doesn't skew results
-    const getNextProps =
-      type === BenchmarkType.UPDATE
-        ? obj => ({ ...getComponentProps(obj), 'data-test': cycle })
-        : getComponentProps;
+    const componentProps = getComponentProps({ cycle });
+    // make sure props always change for update tests
+    if (type === BenchmarkType.UPDATE) {
+      componentProps['data-test'] = cycle;
+    }
 
     this.raf = window.requestAnimationFrame(() => {
       this.setState((state: BenchmarkStateType) => ({
-        getComponentProps: getNextProps,
-        cycle: state.cycle + 1
+        cycle: state.cycle + 1,
+        componentProps
       }));
     });
   }

packages/benchmarks/src/cases/SierpinskiTriangle.js

@@ -53,35 +53,34 @@ class SierpinskiTriangle extends React.Component {
 
       s /= 2;
 
-      return [
-        <SierpinskiTriangle
-          components={components}
-          depth={1}
-          key={1}
-          renderCount={renderCount}
-          s={s}
-          x={x}
-          y={y - s / 2}
-        />,
-        <SierpinskiTriangle
-          components={components}
-          depth={2}
-          key={2}
-          renderCount={renderCount}
-          s={s}
-          x={x - s}
-          y={y + s / 2}
-        />,
-        <SierpinskiTriangle
-          components={components}
-          depth={3}
-          key={3}
-          renderCount={renderCount}
-          s={s}
-          x={x + s}
-          y={y + s / 2}
-        />
-      ];
+      return (
+        <React.Fragment>
+          <SierpinskiTriangle
+            components={components}
+            depth={1}
+            renderCount={renderCount}
+            s={s}
+            x={x}
+            y={y - s / 2}
+          />
+          <SierpinskiTriangle
+            components={components}
+            depth={2}
+            renderCount={renderCount}
+            s={s}
+            x={x - s}
+            y={y + s / 2}
+          />
+          <SierpinskiTriangle
+            components={components}
+            depth={3}
+            renderCount={renderCount}
+            s={s}
+            x={x + s}
+            y={y + s / 2}
+          />
+        </React.Fragment>
+      );
     } else {
       return <span style={{ color: 'white' }}>No implementation available</span>;
     }

yarn.lock

@@ -7950,7 +7950,7 @@ styled-components@2.4.0:
     stylis "^3.4.0"
     supports-color "^3.2.3"
 
-styled-jsx@2.2.1, styled-jsx@^2.2.1:
+styled-jsx@2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-2.2.1.tgz#8b38b9e53e5d9767e392595ab1afdc8426b3ba5d"
   dependencies: