Add benchmarks for autotracking with many components/slices (#31)

Co-authored-by: Mark Erikson <[email protected]>

Author: grumd

README.md

@@ -1,105 +1,73 @@
 # react-redux-benchmarks
+
 Performance benchmark harness for React-Redux
 
 This repo expects that you are using Yarn for package management.
 
 # Running benchmarks
+
 ```bash
-yarn initialize
+yarn build
 yarn start
 ```
 
-After benchmarks have been initialized, you can run with simply:
+After benchmarks have been built, you can run with simply:
 
 ```bash
 yarn start
 ```
 
-## Running specific versions
+You'll need to rebuild the benchmarks after every code change.
+
+## Running specific versions of react-redux
 
 To specify a single version:
 
 ```bash
-REDUX=5.0.7 yarn start
+yarn start --versions 8.1.1
+yarn start -v 8.1.1
 ```
 
 To specify running against multiple versions:
 
 ```bash
-REDUX=5.0.7:4.4.9 yarn start
+yarn start -v 8.1.1 7.2.5
 ```
 
-To run a specific benchmark:
+## To run a specific benchmark:
 
 ```bash
-BENCHMARKS=stockticker yarn start
+yarn start --scenarios deeptree
+yarn start -s deeptree
 ```
 
 or specific benchmarks:
 
 ```bash
-BENCHMARKS=stockticker:another yarn start
+yarn start -s deeptree forms
 ```
 
 ## Setting run length
 
 By default, benchmarks run for 30 seconds. To change this, use
 
 ```bash
-SECONDS=10 yarn start
+yarn start --length 5
+yarn start -l 5
 ```
 
-
 # Adding a benchmark
 
-Benchmarks live in the `sources/` directory. Each benchmark must insert this
-code into `index.js`:
-
-```js
-import 'fps-emit'
-```
-
-In addition, a `config-overrides.js` must be created with these contents:
+Benchmarks live in the `src/scenarios` directory. Each benchmark must render a React component like this:
 
 ```js
-module.exports = function override(config, env) {
-    //do stuff with the webpack config...
-    console.log(`Environment: ${env}`)
-
-    if(env === "production") {
-        config.externals = {
-            "react" : "React",
-            "redux" : "Redux",
-            "react-redux" : "ReactRedux",
-        }
-    }
-
-
-    return config;
-}
-```
-
-and the scripts section of `package.json` should be changed to:
-
-```json
-  "scripts": {
-    "start": "react-app-rewired  start",
-    "build": "react-app-rewired  build",
-    "test": "react-app-rewired  --env=jsdom",
-    ...
-  }
-```
-
-Also, `index.html` must be modified to include these lines:
+import { renderApp } from '../../common'
 
-```html
-    <script type="text/javascript" src="redux.min.js"></script>
-    <script type="text/javascript" src="react.production.min.js"></script>
-    <script type="text/javascript" src="react-dom.production.min.js"></script>
-    <script type="text/javascript" src="react-redux.min.js"></script>
+renderApp(<App />, store)
 ```
 
+Where `App` is your benchmark component, and `store` is your redux store.
 
 If you need to make changes to the `fps-emit` package, bump the version number in its `package.json`,
 then update each benchmark to use the newest version using `yarn upgrade-interactive` and selecting `fps-emit`
-for an update.  Then rebuild all the benchmarks using `yarn initialize`
+for an update. Then rebuild all the benchmarks using `yarn build`

package.json

@@ -28,6 +28,7 @@
     "@replayio/playwright": "^1.0.3",
     "@testing-library/dom": "^8.5.0",
     "@testing-library/user-event": "^13.2.1",
+    "chalk": "4.1.2",
     "chance": "^1.1.8",
     "cli-table2": "^0.2.0",
     "cross-spawn": "^6.0.5",
@@ -37,15 +38,14 @@
     "glob": "^7.1.3",
     "performance-mark-metadata": "^1.0.3",
     "playwright": "^1.35.1",
-    "puppeteer": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.1.0",
     "react-redux-5.1.2": "npm:[email protected]",
     "react-redux-6.0.1": "npm:[email protected]",
     "react-redux-7.2.5": "npm:[email protected]",
-    "react-redux-8.1.0": "npm:[email protected]",
     "react-redux-8.1.0-autotracking": "file:.yalc/react-redux",
+    "react-redux-8.1.1": "npm:[email protected]",
     "recursive-copy": "^2.0.9",
     "redux": "^4.1.1",
     "reselect": "^4.0.0",
@@ -60,10 +60,8 @@
     "@types/fs-extra": "^9.0.12",
     "@types/glob": "^8.1.0",
     "@types/lodash": "^4.14.195",
-    "@types/puppeteer": "^7.0.4",
     "@types/react": "^17.0.21",
     "@types/react-dom": "^17.0.9",
-    "@types/yargs": "^17.0.24",
     "esbuild": "^0.17",
     "esbuild-plugin-alias": "^0.1.2",
     "fs-extra": "^10.0.0",

runBenchmarks.ts

@@ -9,6 +9,7 @@ import Table from 'cli-table2'
 import _ from 'lodash'
 import glob from 'glob'
 import yargs from 'yargs/yargs'
+import chalk from 'chalk'
 
 import {
   capturePageStats,
@@ -53,6 +54,11 @@ const args = yargs(process.argv.slice(2))
     type: 'boolean',
     default: false,
   })
+  .option('headless', {
+    describe: 'Run Chrome in headless mode (default: true)',
+    type: 'boolean',
+    default: true,
+  })
   .help('h')
   .alias('h', 'help')
 
@@ -110,7 +116,7 @@ function printBenchmarkResults(benchmark, versionPerfEntries, trace) {
       table.push([
         version,
         fps.weightedFPS.toFixed(2),
-        `${mountTime.toFixed(1)}, ${averageUpdateTime.toFixed(1)}`,
+        `${mountTime?.toFixed(1)}, ${averageUpdateTime?.toFixed(1)}`,
         ...traceResults,
         fpsNumbers.toString(),
       ])
@@ -179,11 +185,19 @@ function calculateBenchmarkStats(
 
   const [mountEntry, ...updateEntries] = reactTimingEntries
 
-  const mountTime = mountEntry.actualTime
+  if (!mountEntry) {
+    console.error(
+      chalk.red(
+        'Error during component mounting, run the benchmark with "--headless false" to inspect the console for React errors'
+      )
+    )
+  }
+
+  const mountTime = mountEntry?.actualTime
 
   const averageUpdateTime =
-    updateEntries.reduce((sum, entry) => sum + entry.actualTime, 0) /
-      updateEntries.length || 1
+    updateEntries?.reduce((sum, entry) => sum + entry.actualTime, 0) /
+      updateEntries?.length || 1
 
   return { fps, profile: { categories }, mountTime, averageUpdateTime }
 }
@@ -193,11 +207,13 @@ async function runBenchmarks({
   versions,
   length,
   trace,
+  headless,
 }: {
   scenarios: string[]
   versions: string[]
   length: number
   trace: boolean
+  headless: boolean
 }) {
   console.log('Scenarios: ', scenarios)
   const distFolder = path.resolve('dist')
@@ -211,7 +227,7 @@ async function runBenchmarks({
     for (let version of versions) {
       console.log(`  React-Redux version: ${version}`)
       const browser = await playwright.chromium.launch({
-        headless: true,
+        headless,
       })
 
       const folderPath = path.join(distFolder, version, scenario)

src/scenarios/many-components-many-slices-bugged/App.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { useSelector } from 'react-redux'
+
+import { NUMBER_OF_COMPONENTS } from './constants'
+
+import { getSliceName } from './state'
+import type { RootState } from './state'
+
+const createComponent = (index: number) => {
+  const sliceName = getSliceName(index)
+
+  return function Component() {
+    // NOTE: "Bugged" selector used on purpose to force a rerender on every state change
+    // Returning a new object every time causes a rerender
+    const { counter } = useSelector((state: RootState) => {
+      return {
+        counter: state[sliceName].counter,
+      }
+    })
+
+    return <div>{counter}</div>
+  }
+}
+
+function App() {
+  return (
+    <div>
+      {Array.from({ length: NUMBER_OF_COMPONENTS }).map((_, index) => {
+        // App is rendered only once, so components are not re-created
+        const Component = createComponent(index)
+        return <Component key={index} />
+      })}
+    </div>
+  )
+}
+
+export default App

src/scenarios/many-components-many-slices-bugged/constants.ts

@@ -0,0 +1 @@
+export const NUMBER_OF_COMPONENTS = 5000

src/scenarios/many-components-many-slices-bugged/index.tsx

@@ -0,0 +1,32 @@
+import React, { useLayoutEffect } from 'react'
+import { configureStore } from '@reduxjs/toolkit'
+
+import { renderApp } from '../../common'
+import { rootReducer, incrementActions } from './state'
+
+import App from './App'
+
+const store = configureStore({
+  reducer: rootReducer,
+  middleware: (gdm) =>
+    gdm({
+      immutabilityCheck: false,
+      serializableCheck: false,
+    }),
+})
+
+const incrementRandom = () => {
+  const randomIndex = Math.floor(Math.random() * incrementActions.length)
+  store.dispatch(incrementActions[randomIndex]())
+}
+
+const RootApp = () => {
+  useLayoutEffect(() => {
+    setInterval(incrementRandom, 13)
+  }, [])
+
+  return <App />
+}
+
+// @ts-ignore
+renderApp(RootApp, store)

src/scenarios/many-components-many-slices-bugged/state.ts

@@ -0,0 +1,36 @@
+import { combineReducers, createSlice } from '@reduxjs/toolkit'
+import { NUMBER_OF_COMPONENTS } from './constants'
+
+export const getSliceName = (index: number) => `counter_${index}`
+
+const createStateSlice = (index: number) => {
+  return createSlice({
+    name: getSliceName(index),
+    initialState: {
+      counter: 0,
+    },
+    reducers: {
+      increment(state) {
+        state.counter += 1
+      },
+    },
+  })
+}
+
+const slices = Array.from({
+  length: NUMBER_OF_COMPONENTS,
+}).map((_, i) => createStateSlice(i))
+
+export const rootReducer = combineReducers(
+  slices.reduce(
+    (acc: Record<string, typeof slices[number]['reducer']>, slice) => {
+      acc[slice.name] = slice.reducer
+      return acc
+    },
+    {}
+  )
+)
+
+export const incrementActions = slices.map((slice) => slice.actions.increment)
+
+export type RootState = ReturnType<typeof rootReducer>

src/scenarios/many-components-many-slices/App.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { useSelector } from 'react-redux'
+
+import { NUMBER_OF_COMPONENTS } from './constants'
+
+import { getSliceName } from './state'
+import type { RootState } from './state'
+
+const createComponent = (index: number) => {
+  const sliceName = getSliceName(index)
+
+  return function Component() {
+    const counter = useSelector((state: RootState) => state[sliceName].counter)
+
+    return <div>{counter}</div>
+  }
+}
+
+function App() {
+  return (
+    <div>
+      {Array.from({ length: NUMBER_OF_COMPONENTS }).map((_, index) => {
+        // App is rendered only once, so components are not re-created
+        const Component = createComponent(index)
+        return <Component key={index} />
+      })}
+    </div>
+  )
+}
+
+export default App

src/scenarios/many-components-many-slices/constants.ts

@@ -0,0 +1 @@
+export const NUMBER_OF_COMPONENTS = 5000