├── src ├── index.css ├── Common.js ├── index.js ├── App.test.js ├── App.css ├── logo.svg ├── registerServiceWorker.js ├── Functions.js ├── App.js ├── ComponentFunctions.js └── Components.js ├── public ├── favicon.ico ├── manifest.json └── index.html ├── .gitignore ├── package.json └── README.md /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peterbe/function-or-component/master/public/favicon.ico -------------------------------------------------------------------------------- /src/Common.js: -------------------------------------------------------------------------------- 1 | export const collect = (label, t) => { 2 | if (window.beforeSetState) { 3 | const diff = t - window.beforeSetState; 4 | if (!(label in window.timings)) { 5 | window.timings[label] = []; 6 | } 7 | window.timings[label].push(diff); 8 | } 9 | }; 10 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import registerServiceWorker from './registerServiceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | registerServiceWorker(); 9 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "function-or-component", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "chart.js": "2.7.1", 7 | "react": "^16.2.0", 8 | "react-dom": "^16.2.0", 9 | "react-router-dom": "4.2.2", 10 | "react-scripts": "1.1.0" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test --env=jsdom", 16 | "eject": "react-scripts eject" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-title { 18 | font-size: 1.5em; 19 | } 20 | 21 | .App-intro { 22 | font-size: large; 23 | } 24 | 25 | @keyframes App-logo-spin { 26 | from { transform: rotate(0deg); } 27 | to { transform: rotate(360deg); } 28 | } 29 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Function or Component 2 | 3 | DEMO and BENCHMARK: https://www.peterbe.com/plog/component-or-function-in-react 4 | 5 | A demo app to test the performance of rendering React components 6 | in different ways. 7 | 8 | SUPER duper experimental and rough still. 9 | 10 | ## Run 11 | 12 | First clone this repo and cd into it 13 | 14 | ```sh 15 | $ yarn start 16 | ``` 17 | 18 | Open `http://localhost:3000` 19 | 20 | To run in production mode: 21 | 22 | ```sh 23 | $ yarn global add serve 24 | $ yarn build 25 | $ serve -s build 26 | ``` 27 | 28 | Open `http://localhost:5000` 29 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | Measuring React Components Rendering Time 23 | 24 | 25 | 28 |
29 | 30 | 31 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/registerServiceWorker.js: -------------------------------------------------------------------------------- 1 | // In production, we register a service worker to serve assets from local cache. 2 | 3 | // This lets the app load faster on subsequent visits in production, and gives 4 | // it offline capabilities. However, it also means that developers (and users) 5 | // will only see deployed updates on the "N+1" visit to a page, since previously 6 | // cached resources are updated in the background. 7 | 8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy. 9 | // This link also includes instructions on opting out of this behavior. 10 | 11 | const isLocalhost = Boolean( 12 | window.location.hostname === 'localhost' || 13 | // [::1] is the IPv6 localhost address. 14 | window.location.hostname === '[::1]' || 15 | // 127.0.0.1/8 is considered localhost for IPv4. 16 | window.location.hostname.match( 17 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 18 | ) 19 | ); 20 | 21 | export default function register() { 22 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 23 | // The URL constructor is available in all browsers that support SW. 24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location); 25 | if (publicUrl.origin !== window.location.origin) { 26 | // Our service worker won't work if PUBLIC_URL is on a different origin 27 | // from what our page is served on. This might happen if a CDN is used to 28 | // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 29 | return; 30 | } 31 | 32 | window.addEventListener('load', () => { 33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 34 | 35 | if (isLocalhost) { 36 | // This is running on localhost. Lets check if a service worker still exists or not. 37 | checkValidServiceWorker(swUrl); 38 | 39 | // Add some additional logging to localhost, pointing developers to the 40 | // service worker/PWA documentation. 41 | navigator.serviceWorker.ready.then(() => { 42 | console.log( 43 | 'This web app is being served cache-first by a service ' + 44 | 'worker. To learn more, visit https://goo.gl/SC7cgQ' 45 | ); 46 | }); 47 | } else { 48 | // Is not local host. Just register service worker 49 | registerValidSW(swUrl); 50 | } 51 | }); 52 | } 53 | } 54 | 55 | function registerValidSW(swUrl) { 56 | navigator.serviceWorker 57 | .register(swUrl) 58 | .then(registration => { 59 | registration.onupdatefound = () => { 60 | const installingWorker = registration.installing; 61 | installingWorker.onstatechange = () => { 62 | if (installingWorker.state === 'installed') { 63 | if (navigator.serviceWorker.controller) { 64 | // At this point, the old content will have been purged and 65 | // the fresh content will have been added to the cache. 66 | // It's the perfect time to display a "New content is 67 | // available; please refresh." message in your web app. 68 | console.log('New content is available; please refresh.'); 69 | } else { 70 | // At this point, everything has been precached. 71 | // It's the perfect time to display a 72 | // "Content is cached for offline use." message. 73 | console.log('Content is cached for offline use.'); 74 | } 75 | } 76 | }; 77 | }; 78 | }) 79 | .catch(error => { 80 | console.error('Error during service worker registration:', error); 81 | }); 82 | } 83 | 84 | function checkValidServiceWorker(swUrl) { 85 | // Check if the service worker can be found. If it can't reload the page. 86 | fetch(swUrl) 87 | .then(response => { 88 | // Ensure service worker exists, and that we really are getting a JS file. 89 | if ( 90 | response.status === 404 || 91 | response.headers.get('content-type').indexOf('javascript') === -1 92 | ) { 93 | // No service worker found. Probably a different app. Reload the page. 94 | navigator.serviceWorker.ready.then(registration => { 95 | registration.unregister().then(() => { 96 | window.location.reload(); 97 | }); 98 | }); 99 | } else { 100 | // Service worker found. Proceed as normal. 101 | registerValidSW(swUrl); 102 | } 103 | }) 104 | .catch(() => { 105 | console.log( 106 | 'No internet connection found. App is running in offline mode.' 107 | ); 108 | }); 109 | } 110 | 111 | export function unregister() { 112 | if ('serviceWorker' in navigator) { 113 | navigator.serviceWorker.ready.then(registration => { 114 | registration.unregister(); 115 | }); 116 | } 117 | } 118 | -------------------------------------------------------------------------------- /src/Functions.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { collect } from './Common'; 3 | 4 | class Functions extends React.Component { 5 | render() { 6 | return Function100(this.props.count); 7 | } 8 | } 9 | 10 | export default Functions; 11 | 12 | const Function100 = count => { 13 | return Function99(count); 14 | }; 15 | const Function99 = count => { 16 | return Function98(count); 17 | }; 18 | const Function98 = count => { 19 | return Function97(count); 20 | }; 21 | const Function97 = count => { 22 | return Function96(count); 23 | }; 24 | const Function96 = count => { 25 | return Function95(count); 26 | }; 27 | const Function95 = count => { 28 | return Function94(count); 29 | }; 30 | const Function94 = count => { 31 | return Function93(count); 32 | }; 33 | const Function93 = count => { 34 | return Function92(count); 35 | }; 36 | const Function92 = count => { 37 | return Function91(count); 38 | }; 39 | const Function91 = count => { 40 | return Function90(count); 41 | }; 42 | const Function90 = count => { 43 | return Function89(count); 44 | }; 45 | const Function89 = count => { 46 | return Function88(count); 47 | }; 48 | const Function88 = count => { 49 | return Function87(count); 50 | }; 51 | const Function87 = count => { 52 | return Function86(count); 53 | }; 54 | const Function86 = count => { 55 | return Function85(count); 56 | }; 57 | const Function85 = count => { 58 | return Function84(count); 59 | }; 60 | const Function84 = count => { 61 | return Function83(count); 62 | }; 63 | const Function83 = count => { 64 | return Function82(count); 65 | }; 66 | const Function82 = count => { 67 | return Function81(count); 68 | }; 69 | const Function81 = count => { 70 | return Function80(count); 71 | }; 72 | const Function80 = count => { 73 | return Function79(count); 74 | }; 75 | const Function79 = count => { 76 | return Function78(count); 77 | }; 78 | const Function78 = count => { 79 | return Function77(count); 80 | }; 81 | const Function77 = count => { 82 | return Function76(count); 83 | }; 84 | const Function76 = count => { 85 | return Function75(count); 86 | }; 87 | const Function75 = count => { 88 | return Function74(count); 89 | }; 90 | const Function74 = count => { 91 | return Function73(count); 92 | }; 93 | const Function73 = count => { 94 | return Function72(count); 95 | }; 96 | const Function72 = count => { 97 | return Function71(count); 98 | }; 99 | const Function71 = count => { 100 | return Function70(count); 101 | }; 102 | const Function70 = count => { 103 | return Function69(count); 104 | }; 105 | const Function69 = count => { 106 | return Function68(count); 107 | }; 108 | const Function68 = count => { 109 | return Function67(count); 110 | }; 111 | const Function67 = count => { 112 | return Function66(count); 113 | }; 114 | const Function66 = count => { 115 | return Function65(count); 116 | }; 117 | const Function65 = count => { 118 | return Function64(count); 119 | }; 120 | const Function64 = count => { 121 | return Function63(count); 122 | }; 123 | const Function63 = count => { 124 | return Function62(count); 125 | }; 126 | const Function62 = count => { 127 | return Function61(count); 128 | }; 129 | const Function61 = count => { 130 | return Function60(count); 131 | }; 132 | const Function60 = count => { 133 | return Function59(count); 134 | }; 135 | const Function59 = count => { 136 | return Function58(count); 137 | }; 138 | const Function58 = count => { 139 | return Function57(count); 140 | }; 141 | const Function57 = count => { 142 | return Function56(count); 143 | }; 144 | const Function56 = count => { 145 | return Function55(count); 146 | }; 147 | const Function55 = count => { 148 | return Function54(count); 149 | }; 150 | const Function54 = count => { 151 | return Function53(count); 152 | }; 153 | const Function53 = count => { 154 | return Function52(count); 155 | }; 156 | const Function52 = count => { 157 | return Function51(count); 158 | }; 159 | const Function51 = count => { 160 | return Function50(count); 161 | }; 162 | const Function50 = count => { 163 | return Function49(count); 164 | }; 165 | const Function49 = count => { 166 | return Function48(count); 167 | }; 168 | const Function48 = count => { 169 | return Function47(count); 170 | }; 171 | const Function47 = count => { 172 | return Function46(count); 173 | }; 174 | const Function46 = count => { 175 | return Function45(count); 176 | }; 177 | const Function45 = count => { 178 | return Function44(count); 179 | }; 180 | const Function44 = count => { 181 | return Function43(count); 182 | }; 183 | const Function43 = count => { 184 | return Function42(count); 185 | }; 186 | const Function42 = count => { 187 | return Function41(count); 188 | }; 189 | const Function41 = count => { 190 | return Function40(count); 191 | }; 192 | const Function40 = count => { 193 | return Function39(count); 194 | }; 195 | const Function39 = count => { 196 | return Function38(count); 197 | }; 198 | const Function38 = count => { 199 | return Function37(count); 200 | }; 201 | const Function37 = count => { 202 | return Function36(count); 203 | }; 204 | const Function36 = count => { 205 | return Function35(count); 206 | }; 207 | const Function35 = count => { 208 | return Function34(count); 209 | }; 210 | const Function34 = count => { 211 | return Function33(count); 212 | }; 213 | const Function33 = count => { 214 | return Function32(count); 215 | }; 216 | const Function32 = count => { 217 | return Function31(count); 218 | }; 219 | const Function31 = count => { 220 | return Function30(count); 221 | }; 222 | const Function30 = count => { 223 | return Function29(count); 224 | }; 225 | const Function29 = count => { 226 | return Function28(count); 227 | }; 228 | const Function28 = count => { 229 | return Function27(count); 230 | }; 231 | const Function27 = count => { 232 | return Function26(count); 233 | }; 234 | const Function26 = count => { 235 | return Function25(count); 236 | }; 237 | const Function25 = count => { 238 | return Function24(count); 239 | }; 240 | const Function24 = count => { 241 | return Function23(count); 242 | }; 243 | const Function23 = count => { 244 | return Function22(count); 245 | }; 246 | const Function22 = count => { 247 | return Function21(count); 248 | }; 249 | const Function21 = count => { 250 | return Function20(count); 251 | }; 252 | const Function20 = count => { 253 | return Function19(count); 254 | }; 255 | const Function19 = count => { 256 | return Function18(count); 257 | }; 258 | const Function18 = count => { 259 | return Function17(count); 260 | }; 261 | const Function17 = count => { 262 | return Function16(count); 263 | }; 264 | const Function16 = count => { 265 | return Function15(count); 266 | }; 267 | const Function15 = count => { 268 | return Function14(count); 269 | }; 270 | const Function14 = count => { 271 | return Function13(count); 272 | }; 273 | const Function13 = count => { 274 | return Function12(count); 275 | }; 276 | const Function12 = count => { 277 | return Function11(count); 278 | }; 279 | const Function11 = count => { 280 | return Function10(count); 281 | }; 282 | const Function10 = count => { 283 | return Function9(count); 284 | }; 285 | const Function9 = count => { 286 | return Function8(count); 287 | }; 288 | const Function8 = count => { 289 | return Function7(count); 290 | }; 291 | const Function7 = count => { 292 | return Function6(count); 293 | }; 294 | const Function6 = count => { 295 | return Function5(count); 296 | }; 297 | const Function5 = count => { 298 | return Function4(count); 299 | }; 300 | const Function4 = count => { 301 | return Function3(count); 302 | }; 303 | const Function3 = count => { 304 | return Function2(count); 305 | }; 306 | const Function2 = count => { 307 | return Function1(count); 308 | }; 309 | const Function1 = count => { 310 | return Function0(count); 311 | }; 312 | 313 | const Function0 = count => { 314 | collect('Functions', performance.now()); 315 | return

Function0: {count}

; 316 | }; 317 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Chart from 'chart.js'; 3 | import './App.css'; 4 | import Components from './Components'; 5 | import ComponentFunctions from './ComponentFunctions'; 6 | import Functions from './Functions'; 7 | import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom'; 8 | 9 | window.timings = {}; 10 | 11 | class App extends Component { 12 | state = { count: 0, monkeying: false }; 13 | incr = event => { 14 | window.beforeSetState = performance.now(); 15 | this.setState(prevState => ({ 16 | count: prevState.count + 1 17 | })); 18 | }; 19 | reset = event => { 20 | window.timings = {}; 21 | this.setState({ count: 0 }); 22 | }; 23 | startClickMonkey = event => { 24 | this.setState({ monkeying: true }, () => { 25 | this.clickMonkey(); 26 | }); 27 | }; 28 | 29 | clickMonkey = () => { 30 | this.interval1 = setInterval(() => { 31 | const links = document.querySelectorAll('a.choice:not(.active)'); 32 | if (links.length) { 33 | const choice = links[Math.floor(Math.random() * links.length)]; 34 | choice.click(); 35 | } 36 | }, 2000); 37 | this.interval2 = setInterval(() => { 38 | const btn = document.querySelector('button.increment'); 39 | if (btn) { 40 | btn.click(); 41 | } 42 | }, 300); 43 | }; 44 | 45 | stopClickMonkey = event => { 46 | this.setState({ monkeying: false }, () => { 47 | this.stopMonkey(); 48 | }); 49 | }; 50 | 51 | stopMonkey = () => { 52 | if (this.interval1) { 53 | clearInterval(this.interval1); 54 | } 55 | if (this.interval2) { 56 | clearInterval(this.interval2); 57 | } 58 | }; 59 | 60 | render() { 61 | return ( 62 | 63 |
64 |
65 |

66 | Measuring React Components Rendering Time 67 |

68 |
69 | 70 |
71 |
72 |
    73 |
  • 74 | 75 | Reset 76 | 77 |
    • 78 |
  • 79 | 85 | Components 86 | 87 |
    • 88 |
  • 89 | 95 | ComponentFunctions 96 | 97 |
    • 98 |
  • 99 | 105 | Functions 106 | 107 |
    • 108 |
109 |
110 | 111 | 119 | 120 | } 123 | /> 124 | } 127 | /> 128 | } 131 | /> 132 | 133 | 134 |
135 |

Instructions

136 |

137 | Click one of the navigation links above (but not{' '} 138 | Reset). Then click the "Increment" button.
139 | After a while you should see a bar chart summing the 140 | median 141 | {' '} 142 | rendering times of the three different component styles. 143 |

144 |

145 | {this.state.monkeying ? ( 146 | 149 | ) : ( 150 | 153 | )} 154 |

155 |

156 | 157 | Current version of React: {React.version} — Node Env:{' '} 158 | {process.env.NODE_ENV} 159 | 160 |

161 |
162 |
163 | 164 | ); 165 | } 166 | } 167 | 168 | export default App; 169 | 170 | const COLORS = { 171 | blue: 'rgb(54, 162, 235)', 172 | green: 'rgb(75, 192, 192)', 173 | orange: 'rgb(255, 159, 64)', 174 | purple: 'rgb(153, 102, 255)', 175 | red: 'rgb(255, 99, 132)', 176 | yellow: 'rgb(255, 205, 86)' 177 | }; 178 | 179 | class UpdateTimings extends React.Component { 180 | state = { timings: null }; 181 | componentDidMount() { 182 | setInterval(() => { 183 | if (Object.keys(window.timings).length) { 184 | this.setState({ timings: window.timings }, () => { 185 | const datasets = []; 186 | 187 | const colorNames = Object.keys(COLORS); 188 | const labels = Object.keys(this.state.timings); 189 | labels.sort(); 190 | labels.forEach((label, i) => { 191 | const v = this.state.timings[label]; 192 | const color = COLORS[colorNames[i]]; 193 | v.sort((a, b) => a - b); 194 | const median = (v[(v.length - 1) >> 1] + v[v.length >> 1]) / 2; 195 | datasets.push({ 196 | label: label, 197 | data: [median], 198 | backgroundColor: color, 199 | borderColor: color, 200 | fill: false 201 | }); 202 | }); 203 | 204 | const config = { 205 | type: 'bar', 206 | data: { 207 | datasets: datasets 208 | }, 209 | options: { 210 | animation: { 211 | duration: 0 212 | }, 213 | responsive: true, 214 | title: { 215 | display: true, 216 | text: 'Timings' 217 | }, 218 | tooltips: { 219 | mode: 'index', 220 | intersect: false 221 | }, 222 | hover: { 223 | mode: 'nearest', 224 | intersect: true 225 | }, 226 | scales: { 227 | yAxes: [ 228 | { 229 | ticks: { 230 | beginAtZero: true 231 | } 232 | } 233 | ] 234 | } 235 | } 236 | }; 237 | const ctx = document.getElementById('chart'); 238 | if (this.lineChart) { 239 | this.lineChart.destroy(); 240 | } 241 | this.lineChart = new Chart(ctx, config); 242 | }); 243 | } 244 | }, 4000); 245 | } 246 | render() { 247 | if (this.state.timings === null) { 248 | return null; 249 | } 250 | return ( 251 |
252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | {Object.keys(this.state.timings).map(label => { 264 | const v = this.state.timings[label]; 265 | const sum = v.reduce((a, b) => a + b); 266 | const mean = sum / v.length; 267 | v.sort((a, b) => a - b); 268 | const median = (v[(v.length - 1) >> 1] + v[v.length >> 1]) / 2; 269 | 270 | return ( 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | ); 279 | })} 280 | 281 |
LabelMeasurementsMeanMedianMin
{label}{v.length}{mean.toFixed(2)}ms{median.toFixed(2)}ms{v[0].toFixed(2)}ms
282 |

283 | 284 | Tip! 285 | Focus on the median, not the mean. 286 | 287 |

288 |
289 | 290 |
291 |
292 | ); 293 | } 294 | } 295 | -------------------------------------------------------------------------------- /src/ComponentFunctions.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { collect } from './Common'; 3 | 4 | class ComponentFunctions extends React.Component { 5 | render() { 6 | return ; 7 | } 8 | } 9 | 10 | export default ComponentFunctions; 11 | 12 | const ComponentFunction100 = ({ count }) => { 13 | return ; 14 | }; 15 | const ComponentFunction99 = ({ count }) => { 16 | return ; 17 | }; 18 | const ComponentFunction98 = ({ count }) => { 19 | return ; 20 | }; 21 | const ComponentFunction97 = ({ count }) => { 22 | return ; 23 | }; 24 | const ComponentFunction96 = ({ count }) => { 25 | return ; 26 | }; 27 | const ComponentFunction95 = ({ count }) => { 28 | return ; 29 | }; 30 | const ComponentFunction94 = ({ count }) => { 31 | return ; 32 | }; 33 | const ComponentFunction93 = ({ count }) => { 34 | return ; 35 | }; 36 | const ComponentFunction92 = ({ count }) => { 37 | return ; 38 | }; 39 | const ComponentFunction91 = ({ count }) => { 40 | return ; 41 | }; 42 | const ComponentFunction90 = ({ count }) => { 43 | return ; 44 | }; 45 | const ComponentFunction89 = ({ count }) => { 46 | return ; 47 | }; 48 | const ComponentFunction88 = ({ count }) => { 49 | return ; 50 | }; 51 | const ComponentFunction87 = ({ count }) => { 52 | return ; 53 | }; 54 | const ComponentFunction86 = ({ count }) => { 55 | return ; 56 | }; 57 | const ComponentFunction85 = ({ count }) => { 58 | return ; 59 | }; 60 | const ComponentFunction84 = ({ count }) => { 61 | return ; 62 | }; 63 | const ComponentFunction83 = ({ count }) => { 64 | return ; 65 | }; 66 | const ComponentFunction82 = ({ count }) => { 67 | return ; 68 | }; 69 | const ComponentFunction81 = ({ count }) => { 70 | return ; 71 | }; 72 | const ComponentFunction80 = ({ count }) => { 73 | return ; 74 | }; 75 | const ComponentFunction79 = ({ count }) => { 76 | return ; 77 | }; 78 | const ComponentFunction78 = ({ count }) => { 79 | return ; 80 | }; 81 | const ComponentFunction77 = ({ count }) => { 82 | return ; 83 | }; 84 | const ComponentFunction76 = ({ count }) => { 85 | return ; 86 | }; 87 | const ComponentFunction75 = ({ count }) => { 88 | return ; 89 | }; 90 | const ComponentFunction74 = ({ count }) => { 91 | return ; 92 | }; 93 | const ComponentFunction73 = ({ count }) => { 94 | return ; 95 | }; 96 | const ComponentFunction72 = ({ count }) => { 97 | return ; 98 | }; 99 | const ComponentFunction71 = ({ count }) => { 100 | return ; 101 | }; 102 | const ComponentFunction70 = ({ count }) => { 103 | return ; 104 | }; 105 | const ComponentFunction69 = ({ count }) => { 106 | return ; 107 | }; 108 | const ComponentFunction68 = ({ count }) => { 109 | return ; 110 | }; 111 | const ComponentFunction67 = ({ count }) => { 112 | return ; 113 | }; 114 | const ComponentFunction66 = ({ count }) => { 115 | return ; 116 | }; 117 | const ComponentFunction65 = ({ count }) => { 118 | return ; 119 | }; 120 | const ComponentFunction64 = ({ count }) => { 121 | return ; 122 | }; 123 | const ComponentFunction63 = ({ count }) => { 124 | return ; 125 | }; 126 | const ComponentFunction62 = ({ count }) => { 127 | return ; 128 | }; 129 | const ComponentFunction61 = ({ count }) => { 130 | return ; 131 | }; 132 | const ComponentFunction60 = ({ count }) => { 133 | return ; 134 | }; 135 | const ComponentFunction59 = ({ count }) => { 136 | return ; 137 | }; 138 | const ComponentFunction58 = ({ count }) => { 139 | return ; 140 | }; 141 | const ComponentFunction57 = ({ count }) => { 142 | return ; 143 | }; 144 | const ComponentFunction56 = ({ count }) => { 145 | return ; 146 | }; 147 | const ComponentFunction55 = ({ count }) => { 148 | return ; 149 | }; 150 | const ComponentFunction54 = ({ count }) => { 151 | return ; 152 | }; 153 | const ComponentFunction53 = ({ count }) => { 154 | return ; 155 | }; 156 | const ComponentFunction52 = ({ count }) => { 157 | return ; 158 | }; 159 | const ComponentFunction51 = ({ count }) => { 160 | return ; 161 | }; 162 | const ComponentFunction50 = ({ count }) => { 163 | return ; 164 | }; 165 | const ComponentFunction49 = ({ count }) => { 166 | return ; 167 | }; 168 | const ComponentFunction48 = ({ count }) => { 169 | return ; 170 | }; 171 | const ComponentFunction47 = ({ count }) => { 172 | return ; 173 | }; 174 | const ComponentFunction46 = ({ count }) => { 175 | return ; 176 | }; 177 | const ComponentFunction45 = ({ count }) => { 178 | return ; 179 | }; 180 | const ComponentFunction44 = ({ count }) => { 181 | return ; 182 | }; 183 | const ComponentFunction43 = ({ count }) => { 184 | return ; 185 | }; 186 | const ComponentFunction42 = ({ count }) => { 187 | return ; 188 | }; 189 | const ComponentFunction41 = ({ count }) => { 190 | return ; 191 | }; 192 | const ComponentFunction40 = ({ count }) => { 193 | return ; 194 | }; 195 | const ComponentFunction39 = ({ count }) => { 196 | return ; 197 | }; 198 | const ComponentFunction38 = ({ count }) => { 199 | return ; 200 | }; 201 | const ComponentFunction37 = ({ count }) => { 202 | return ; 203 | }; 204 | const ComponentFunction36 = ({ count }) => { 205 | return ; 206 | }; 207 | const ComponentFunction35 = ({ count }) => { 208 | return ; 209 | }; 210 | const ComponentFunction34 = ({ count }) => { 211 | return ; 212 | }; 213 | const ComponentFunction33 = ({ count }) => { 214 | return ; 215 | }; 216 | const ComponentFunction32 = ({ count }) => { 217 | return ; 218 | }; 219 | const ComponentFunction31 = ({ count }) => { 220 | return ; 221 | }; 222 | const ComponentFunction30 = ({ count }) => { 223 | return ; 224 | }; 225 | const ComponentFunction29 = ({ count }) => { 226 | return ; 227 | }; 228 | const ComponentFunction28 = ({ count }) => { 229 | return ; 230 | }; 231 | const ComponentFunction27 = ({ count }) => { 232 | return ; 233 | }; 234 | const ComponentFunction26 = ({ count }) => { 235 | return ; 236 | }; 237 | const ComponentFunction25 = ({ count }) => { 238 | return ; 239 | }; 240 | const ComponentFunction24 = ({ count }) => { 241 | return ; 242 | }; 243 | const ComponentFunction23 = ({ count }) => { 244 | return ; 245 | }; 246 | const ComponentFunction22 = ({ count }) => { 247 | return ; 248 | }; 249 | const ComponentFunction21 = ({ count }) => { 250 | return ; 251 | }; 252 | const ComponentFunction20 = ({ count }) => { 253 | return ; 254 | }; 255 | const ComponentFunction19 = ({ count }) => { 256 | return ; 257 | }; 258 | const ComponentFunction18 = ({ count }) => { 259 | return ; 260 | }; 261 | const ComponentFunction17 = ({ count }) => { 262 | return ; 263 | }; 264 | const ComponentFunction16 = ({ count }) => { 265 | return ; 266 | }; 267 | const ComponentFunction15 = ({ count }) => { 268 | return ; 269 | }; 270 | const ComponentFunction14 = ({ count }) => { 271 | return ; 272 | }; 273 | const ComponentFunction13 = ({ count }) => { 274 | return ; 275 | }; 276 | const ComponentFunction12 = ({ count }) => { 277 | return ; 278 | }; 279 | const ComponentFunction11 = ({ count }) => { 280 | return ; 281 | }; 282 | const ComponentFunction10 = ({ count }) => { 283 | return ; 284 | }; 285 | const ComponentFunction9 = ({ count }) => { 286 | return ; 287 | }; 288 | const ComponentFunction8 = ({ count }) => { 289 | return ; 290 | }; 291 | const ComponentFunction7 = ({ count }) => { 292 | return ; 293 | }; 294 | const ComponentFunction6 = ({ count }) => { 295 | return ; 296 | }; 297 | const ComponentFunction5 = ({ count }) => { 298 | return ; 299 | }; 300 | const ComponentFunction4 = ({ count }) => { 301 | return ; 302 | }; 303 | const ComponentFunction3 = ({ count }) => { 304 | return ; 305 | }; 306 | const ComponentFunction2 = ({ count }) => { 307 | return ; 308 | }; 309 | const ComponentFunction1 = ({ count }) => { 310 | return ; 311 | }; 312 | 313 | const ComponentFunction0 = ({ count }) => { 314 | collect('ComponentFunctions', performance.now()); 315 | return

ComponentFunction0: {count}

; 316 | }; 317 | -------------------------------------------------------------------------------- /src/Components.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { collect } from './Common'; 3 | 4 | class Components extends React.Component { 5 | render() { 6 | return ; 7 | } 8 | } 9 | 10 | export default Components; 11 | 12 | class Component100 extends React.PureComponent { 13 | render() { 14 | return ; 15 | } 16 | } 17 | class Component99 extends React.PureComponent { 18 | render() { 19 | return ; 20 | } 21 | } 22 | class Component98 extends React.PureComponent { 23 | render() { 24 | return ; 25 | } 26 | } 27 | class Component97 extends React.PureComponent { 28 | render() { 29 | return ; 30 | } 31 | } 32 | class Component96 extends React.PureComponent { 33 | render() { 34 | return ; 35 | } 36 | } 37 | class Component95 extends React.PureComponent { 38 | render() { 39 | return ; 40 | } 41 | } 42 | class Component94 extends React.PureComponent { 43 | render() { 44 | return ; 45 | } 46 | } 47 | class Component93 extends React.PureComponent { 48 | render() { 49 | return ; 50 | } 51 | } 52 | class Component92 extends React.PureComponent { 53 | render() { 54 | return ; 55 | } 56 | } 57 | class Component91 extends React.PureComponent { 58 | render() { 59 | return ; 60 | } 61 | } 62 | class Component90 extends React.PureComponent { 63 | render() { 64 | return ; 65 | } 66 | } 67 | class Component89 extends React.PureComponent { 68 | render() { 69 | return ; 70 | } 71 | } 72 | class Component88 extends React.PureComponent { 73 | render() { 74 | return ; 75 | } 76 | } 77 | class Component87 extends React.PureComponent { 78 | render() { 79 | return ; 80 | } 81 | } 82 | class Component86 extends React.PureComponent { 83 | render() { 84 | return ; 85 | } 86 | } 87 | class Component85 extends React.PureComponent { 88 | render() { 89 | return ; 90 | } 91 | } 92 | class Component84 extends React.PureComponent { 93 | render() { 94 | return ; 95 | } 96 | } 97 | class Component83 extends React.PureComponent { 98 | render() { 99 | return ; 100 | } 101 | } 102 | class Component82 extends React.PureComponent { 103 | render() { 104 | return ; 105 | } 106 | } 107 | class Component81 extends React.PureComponent { 108 | render() { 109 | return ; 110 | } 111 | } 112 | class Component80 extends React.PureComponent { 113 | render() { 114 | return ; 115 | } 116 | } 117 | class Component79 extends React.PureComponent { 118 | render() { 119 | return ; 120 | } 121 | } 122 | class Component78 extends React.PureComponent { 123 | render() { 124 | return ; 125 | } 126 | } 127 | class Component77 extends React.PureComponent { 128 | render() { 129 | return ; 130 | } 131 | } 132 | class Component76 extends React.PureComponent { 133 | render() { 134 | return ; 135 | } 136 | } 137 | class Component75 extends React.PureComponent { 138 | render() { 139 | return ; 140 | } 141 | } 142 | class Component74 extends React.PureComponent { 143 | render() { 144 | return ; 145 | } 146 | } 147 | class Component73 extends React.PureComponent { 148 | render() { 149 | return ; 150 | } 151 | } 152 | class Component72 extends React.PureComponent { 153 | render() { 154 | return ; 155 | } 156 | } 157 | class Component71 extends React.PureComponent { 158 | render() { 159 | return ; 160 | } 161 | } 162 | class Component70 extends React.PureComponent { 163 | render() { 164 | return ; 165 | } 166 | } 167 | class Component69 extends React.PureComponent { 168 | render() { 169 | return ; 170 | } 171 | } 172 | class Component68 extends React.PureComponent { 173 | render() { 174 | return ; 175 | } 176 | } 177 | class Component67 extends React.PureComponent { 178 | render() { 179 | return ; 180 | } 181 | } 182 | class Component66 extends React.PureComponent { 183 | render() { 184 | return ; 185 | } 186 | } 187 | class Component65 extends React.PureComponent { 188 | render() { 189 | return ; 190 | } 191 | } 192 | class Component64 extends React.PureComponent { 193 | render() { 194 | return ; 195 | } 196 | } 197 | class Component63 extends React.PureComponent { 198 | render() { 199 | return ; 200 | } 201 | } 202 | class Component62 extends React.PureComponent { 203 | render() { 204 | return ; 205 | } 206 | } 207 | class Component61 extends React.PureComponent { 208 | render() { 209 | return ; 210 | } 211 | } 212 | class Component60 extends React.PureComponent { 213 | render() { 214 | return ; 215 | } 216 | } 217 | class Component59 extends React.PureComponent { 218 | render() { 219 | return ; 220 | } 221 | } 222 | class Component58 extends React.PureComponent { 223 | render() { 224 | return ; 225 | } 226 | } 227 | class Component57 extends React.PureComponent { 228 | render() { 229 | return ; 230 | } 231 | } 232 | class Component56 extends React.PureComponent { 233 | render() { 234 | return ; 235 | } 236 | } 237 | class Component55 extends React.PureComponent { 238 | render() { 239 | return ; 240 | } 241 | } 242 | class Component54 extends React.PureComponent { 243 | render() { 244 | return ; 245 | } 246 | } 247 | class Component53 extends React.PureComponent { 248 | render() { 249 | return ; 250 | } 251 | } 252 | class Component52 extends React.PureComponent { 253 | render() { 254 | return ; 255 | } 256 | } 257 | class Component51 extends React.PureComponent { 258 | render() { 259 | return ; 260 | } 261 | } 262 | class Component50 extends React.PureComponent { 263 | render() { 264 | return ; 265 | } 266 | } 267 | class Component49 extends React.PureComponent { 268 | render() { 269 | return ; 270 | } 271 | } 272 | class Component48 extends React.PureComponent { 273 | render() { 274 | return ; 275 | } 276 | } 277 | class Component47 extends React.PureComponent { 278 | render() { 279 | return ; 280 | } 281 | } 282 | class Component46 extends React.PureComponent { 283 | render() { 284 | return ; 285 | } 286 | } 287 | class Component45 extends React.PureComponent { 288 | render() { 289 | return ; 290 | } 291 | } 292 | class Component44 extends React.PureComponent { 293 | render() { 294 | return ; 295 | } 296 | } 297 | class Component43 extends React.PureComponent { 298 | render() { 299 | return ; 300 | } 301 | } 302 | class Component42 extends React.PureComponent { 303 | render() { 304 | return ; 305 | } 306 | } 307 | class Component41 extends React.PureComponent { 308 | render() { 309 | return ; 310 | } 311 | } 312 | class Component40 extends React.PureComponent { 313 | render() { 314 | return ; 315 | } 316 | } 317 | class Component39 extends React.PureComponent { 318 | render() { 319 | return ; 320 | } 321 | } 322 | class Component38 extends React.PureComponent { 323 | render() { 324 | return ; 325 | } 326 | } 327 | class Component37 extends React.PureComponent { 328 | render() { 329 | return ; 330 | } 331 | } 332 | class Component36 extends React.PureComponent { 333 | render() { 334 | return ; 335 | } 336 | } 337 | class Component35 extends React.PureComponent { 338 | render() { 339 | return ; 340 | } 341 | } 342 | class Component34 extends React.PureComponent { 343 | render() { 344 | return ; 345 | } 346 | } 347 | class Component33 extends React.PureComponent { 348 | render() { 349 | return ; 350 | } 351 | } 352 | class Component32 extends React.PureComponent { 353 | render() { 354 | return ; 355 | } 356 | } 357 | class Component31 extends React.PureComponent { 358 | render() { 359 | return ; 360 | } 361 | } 362 | class Component30 extends React.PureComponent { 363 | render() { 364 | return ; 365 | } 366 | } 367 | class Component29 extends React.PureComponent { 368 | render() { 369 | return ; 370 | } 371 | } 372 | class Component28 extends React.PureComponent { 373 | render() { 374 | return ; 375 | } 376 | } 377 | class Component27 extends React.PureComponent { 378 | render() { 379 | return ; 380 | } 381 | } 382 | class Component26 extends React.PureComponent { 383 | render() { 384 | return ; 385 | } 386 | } 387 | class Component25 extends React.PureComponent { 388 | render() { 389 | return ; 390 | } 391 | } 392 | class Component24 extends React.PureComponent { 393 | render() { 394 | return ; 395 | } 396 | } 397 | class Component23 extends React.PureComponent { 398 | render() { 399 | return ; 400 | } 401 | } 402 | class Component22 extends React.PureComponent { 403 | render() { 404 | return ; 405 | } 406 | } 407 | class Component21 extends React.PureComponent { 408 | render() { 409 | return ; 410 | } 411 | } 412 | class Component20 extends React.PureComponent { 413 | render() { 414 | return ; 415 | } 416 | } 417 | class Component19 extends React.PureComponent { 418 | render() { 419 | return ; 420 | } 421 | } 422 | class Component18 extends React.PureComponent { 423 | render() { 424 | return ; 425 | } 426 | } 427 | class Component17 extends React.PureComponent { 428 | render() { 429 | return ; 430 | } 431 | } 432 | class Component16 extends React.PureComponent { 433 | render() { 434 | return ; 435 | } 436 | } 437 | class Component15 extends React.PureComponent { 438 | render() { 439 | return ; 440 | } 441 | } 442 | class Component14 extends React.PureComponent { 443 | render() { 444 | return ; 445 | } 446 | } 447 | class Component13 extends React.PureComponent { 448 | render() { 449 | return ; 450 | } 451 | } 452 | class Component12 extends React.PureComponent { 453 | render() { 454 | return ; 455 | } 456 | } 457 | class Component11 extends React.PureComponent { 458 | render() { 459 | return ; 460 | } 461 | } 462 | class Component10 extends React.PureComponent { 463 | render() { 464 | return ; 465 | } 466 | } 467 | class Component9 extends React.PureComponent { 468 | render() { 469 | return ; 470 | } 471 | } 472 | class Component8 extends React.PureComponent { 473 | render() { 474 | return ; 475 | } 476 | } 477 | class Component7 extends React.PureComponent { 478 | render() { 479 | return ; 480 | } 481 | } 482 | class Component6 extends React.PureComponent { 483 | render() { 484 | return ; 485 | } 486 | } 487 | class Component5 extends React.PureComponent { 488 | render() { 489 | return ; 490 | } 491 | } 492 | class Component4 extends React.PureComponent { 493 | render() { 494 | return ; 495 | } 496 | } 497 | class Component3 extends React.PureComponent { 498 | render() { 499 | return ; 500 | } 501 | } 502 | class Component2 extends React.PureComponent { 503 | render() { 504 | return ; 505 | } 506 | } 507 | class Component1 extends React.PureComponent { 508 | render() { 509 | return ; 510 | } 511 | } 512 | 513 | class Component0 extends React.PureComponent { 514 | render() { 515 | collect('Components', performance.now()); 516 | return

Component0: {this.props.count}

; 517 | } 518 | } 519 | --------------------------------------------------------------------------------