initial commit
[react-class-fn-comp-performance] / src / App.js
1 import React, {useEffect} from 'react';
2 import logo from './logo.svg';
3 import './App.css';
4
5 class CustomClass {
6   constructor(a) {
7     this.a = a;
8   }
9
10   getValue() {
11     return this.a;
12   }
13
14   getModifiedValue() {
15     return this.a + ' modified'
16   }
17 }
18
19 const customFn = (val) => {
20   return {
21     getValue: () => {
22       return val;
23     },
24     getModifiedValue: () => {
25       return val + ' modified';
26     }
27   }
28 }
29
30 const NUM_RUNS = 10000000;
31 const TRIAL_NUM = 10;
32
33 const createStats = (benchmarks) => ({
34   benchmarks,
35   average: benchmarks.reduce((acc, e) => acc + e, 0) / benchmarks.length,
36   min: benchmarks.reduce((acc, e) => {
37     if (e < acc) {
38       return e;
39     }
40     return acc;
41   }, benchmarks[0]),
42   max: benchmarks.reduce((acc, e) => {
43     if (e > acc) {
44       return e;
45     }
46     return acc;
47   }, benchmarks[0])
48 })
49
50 const doClass = () => {
51   const benchmarks = [];
52
53   for (let k = 0; k < TRIAL_NUM; k++) {
54     var start = performance.now();
55     for (let i = 0; i < NUM_RUNS; i++) {
56       const myclass = new CustomClass('some value');
57       myclass.getValue();
58       myclass.getModifiedValue();
59     }
60     var end = performance.now();
61     benchmarks.push(end - start);
62   }
63
64   const stats = createStats(benchmarks)
65   console.log('----- CLASS -----');
66   console.log('min: ', stats.min);
67   console.log('max: ', stats.max);
68   console.log('average: ', stats.average);
69 }
70
71 const doFn = () => {
72   const benchmarks = [];
73
74   for (let k = 0; k < TRIAL_NUM; k++) {
75     var start = performance.now();
76     for (let i = 0; i < NUM_RUNS; i++) {
77       const myfn = customFn('some value')
78       myfn.getValue();
79       myfn.getModifiedValue();
80     }
81     var end = performance.now();
82     benchmarks.push(end - start);
83   }
84
85   const stats = createStats(benchmarks);
86
87   console.log('----- FUNCT -----');
88   console.log('min: ', stats.min);
89   console.log('max: ', stats.max);
90   console.log('average: ', stats.average);
91 }
92
93 function App() {
94   useEffect(doClass, []);
95   useEffect(doFn, []);
96
97   return (
98     <div className="App">
99       <header className="App-header">
100         <img src={logo} className="App-logo" alt="logo" />
101         <p>
102           Edit <code>src/App.js</code> and save to reload.
103         </p>
104         <a
105           className="App-link"
106           href="https://reactjs.org"
107           target="_blank"
108           rel="noopener noreferrer"
109         >
110           Learn React
111         </a>
112       </header>
113     </div>
114   );
115 }
116
117 export default App;