added 1000 fields update count

Author: bennobuilder

benchmark/benchmarks/react/1000fields/bench/agilets/nestedState.tsx

@@ -11,9 +11,13 @@ const FIELDS = AgileApp.createState(
   )
 );
 
+let updatedFieldsCount = 0;
+
 function Field({ field }: { field: State<string> }) {
   const name = useAgile(field);
 
+  updatedFieldsCount++;
+
   return (
     <div>
       Last {`<Field>`} render at: {new Date().toISOString()}
@@ -22,6 +26,9 @@ function Field({ field }: { field: State<string> }) {
         value={name}
         onChange={(e) => {
           field.set(e.target.value);
+          (document.getElementById(
+            'updatedFieldsCount'
+          ) as any).innerText = updatedFieldsCount;
         }}
       />
     </div>
@@ -39,6 +46,7 @@ function App() {
       {fields.map((field, index) => (
         <Field key={index} field={field} />
       ))}
+      <div id={'updatedFieldsCount'} />
     </div>
   );
 }

benchmark/benchmarks/react/1000fields/bench/hookstate.tsx

@@ -6,9 +6,13 @@ const fields = createState(
   Array.from(Array.from(Array(1000).keys()).map((i) => `Field #${i + 1} value`))
 );
 
+let updatedFieldsCount = 0;
+
 function Field({ field }: { field: State<string> }) {
   const name = useHookstate(field);
 
+  updatedFieldsCount++;
+
   return (
     <div>
       Last {`<Field>`} render at: {new Date().toISOString()}
@@ -17,6 +21,9 @@ function Field({ field }: { field: State<string> }) {
         value={name.get()}
         onChange={(e) => {
           name.set(e.target.value);
+          (document.getElementById(
+            'updatedFieldsCount'
+          ) as any).innerText = updatedFieldsCount;
         }}
       />
     </div>
@@ -34,6 +41,7 @@ function App() {
       {state.map((field, index) => (
         <Field key={index} field={field} />
       ))}
+      <div id={'updatedFieldsCount'} />
     </div>
   );
 }

benchmark/benchmarks/react/1000fields/bench/jotai.tsx

@@ -8,14 +8,26 @@ const fields = Array.from(Array(1000).keys()).map((i) =>
 
 const fieldsStore = atom(fields);
 
+let updatedFieldsCount = 0;
+
 function Field({ field }: { field: Atom<string> }) {
   const [name, rename] = useAtom(field);
 
+  updatedFieldsCount++;
+
   return (
     <div>
       Last {`<Field>`} render at: {new Date().toISOString()}
       &nbsp;
-      <input value={name} onChange={(e) => rename(e.target.value)} />
+      <input
+        value={name}
+        onChange={(e) => {
+          rename(e.target.value);
+          (document.getElementById(
+            'updatedFieldsCount'
+          ) as any).innerText = updatedFieldsCount;
+        }}
+      />
     </div>
   );
 }
@@ -32,6 +44,7 @@ function App() {
       {fields.map((field, index) => (
         <Field key={index} field={field} />
       ))}
+      <div id={'updatedFieldsCount'} />
     </div>
   );
 }

benchmark/benchmarks/react/1000fields/index.ts

@@ -45,6 +45,11 @@ function configTest(renderElement: (target: HTMLElement) => void): Options {
       renderElement(target);
     },
     onComplete() {
+      (this as any).updatedFieldsCount = parseInt(
+        (document.getElementById('updatedFieldsCount') as any)?.innerText,
+        10
+      );
+
       // Unmount React Component
       ReactDOM.unmountComponentAtNode(target);
       target.innerHTML = '';
@@ -71,7 +76,7 @@ suite
   .on('cycle', (event: any) => {
     console.log(
       String(event.target),
-      `renderCount: ${event.target.renderCount}`
+      `[updatedFieldsCount: ${event.target.updatedFieldsCount}]`
     );
   })
   .on('complete', function (this: any) {

benchmark/benchmarks/react/computed/index.ts

@@ -36,7 +36,14 @@ function configTest(renderElement: (target: HTMLElement) => void): Options {
     },
     onComplete() {
       // Set 'output' in the Benchmark itself to print it later
-      (this as any).output = parseInt(target.innerText, 10);
+      (this as any).output = parseInt(
+        (target.querySelector('h1') as any)?.innerText,
+        10
+      );
+      (this as any).computedOutput = parseInt(
+        (target.querySelector('p') as any)?.innerText,
+        10
+      );
 
       // Unmount React Component
       ReactDOM.unmountComponentAtNode(target);
@@ -57,7 +64,10 @@ suite
     console.log(`Starting ${this.name}`);
   })
   .on('cycle', (event: any) => {
-    console.log(String(event.target));
+    console.log(
+      String(event.target),
+      `[Count: ${event.target.output}, ComputedCount: ${event.target.computedOutput}]`
+    );
   })
   .on('complete', function (this: any) {
     console.log(`Fastest is ${this.filter('fastest').map('name')}`);

benchmark/package.json

@@ -9,7 +9,7 @@
   "scripts": {
     "test": "node -r esbuild-register run.ts",
     "test:counter": "yarn test ./benchmarks/react/counter",
-    "test:fields": "yarn test ./benchmarks/react/1000fields",
+    "test:1000fields": "yarn test ./benchmarks/react/1000fields",
     "test:computed": "yarn test ./benchmarks/react/computed",
     "install:local:agile": "yalc add @agile-ts/core @agile-ts/react",
     "install:public:agile": "yarn add @agile-ts/core @agile-ts/react"