updated fields benchmark

Author: bennobuilder

benchmark/README.md

@@ -20,15 +20,53 @@ but it is better than nothing.
 ## 1000 Fields
 
 ```ts
-1. Agile nested State  x 9,687 ops/sec ±2.46% (52 runs sampled)
-2. Hookstate           x 5,170 ops/sec ±5.77% (31 runs sampled)
-3. Jotai               x 4,578 ops/sec ±5.49% (57 runs sampled)
-4. Recoil              x 3,790 ops/sec ±3.74% (55 runs sampled)
-5. Agile State         x 1,480 ops/sec ±1.39% (12 runs sampled)
-6. Agile Collection    x 498 ops/sec ±1.81% (61 runs sampled)
-7. Redux               x 150 ops/sec ±1.72% (59 runs sampled)
-8. Mobx                x 143 ops/sec ±0.92% (57 runs sampled)
-9. Valtio              x 37.44 ops/sec ±5.17% (42 runs sampled)
+// 1 Field
+Agile Collection x 13,729 ops/sec ±3.42% (60 runs sampled) [updatedFieldsCount: 76468, renderFieldsCount: 73]
+Agile State x 19,008 ops/sec ±1.87% (66 runs sampled) [updatedFieldsCount: 103559, renderFieldsCount: 72]
+Agile nested State x 21,119 ops/sec ±1.45% (64 runs sampled) [updatedFieldsCount: 116226, renderFieldsCount: 72]
+Hookstate x 20,026 ops/sec ±0.68% (64 runs sampled) [updatedFieldsCount: 112513, renderFieldsCount: 112513]
+Jotai x 16,372 ops/sec ±3.34% (63 runs sampled) [updatedFieldsCount: 90275, renderFieldsCount: 90275]
+Mobx x 15,892 ops/sec ±3.42% (60 runs sampled) [updatedFieldsCount: 82400, renderFieldsCount: 82400]
+Nano Stores x 21,455 ops/sec ±1.00% (66 runs sampled) [updatedFieldsCount: 114136, renderFieldsCount: 114136]
+Recoil x 11,504 ops/sec ±3.44% (63 runs sampled) [updatedFieldsCount: 61553, renderFieldsCount: 61554]
+Redux x 13,070 ops/sec ±2.73% (62 runs sampled) [updatedFieldsCount: 69239, renderFieldsCount: 69240]
+Valtio x 9,962 ops/sec ±2.60% (60 runs sampled) [updatedFieldsCount: 54290, renderFieldsCount: 108579]
+
+// 10 Fields
+Agile Collection x 10,651 ops/sec ±4.14% (58 runs sampled) [updatedFieldsCount: 56668, renderFieldsCount: 582]
+Agile State x 16,175 ops/sec ±1.55% (65 runs sampled) [updatedFieldsCount: 87481, renderFieldsCount: 80]
+Agile nested State x 20,703 ops/sec ±1.27% (65 runs sampled) [updatedFieldsCount: 113946, renderFieldsCount: 712]
+Hookstate x 18,733 ops/sec ±3.14% (59 runs sampled) [updatedFieldsCount: 105792, renderFieldsCount: 105801]
+Jotai x 15,602 ops/sec ±3.65% (61 runs sampled) [updatedFieldsCount: 85977, renderFieldsCount: 85986]
+Mobx x 9,283 ops/sec ±3.16% (52 runs sampled) [updatedFieldsCount: 50806, renderFieldsCount: 508060]
+Nano Stores x 20,125 ops/sec ±1.62% (62 runs sampled) [updatedFieldsCount: 108704, renderFieldsCount: 108713]
+Recoil x 11,103 ops/sec ±4.50% (61 runs sampled) [updatedFieldsCount: 62920, renderFieldsCount: 62939]
+Redux x 8,728 ops/sec ±1.61% (64 runs sampled) [updatedFieldsCount: 50794, renderFieldsCount: 507950]
+Valtio x 3,557 ops/sec ±2.96% (23 runs sampled) [updatedFieldsCount: 22473, renderFieldsCount: 449450]
+
+// 100 Fields
+Agile Collection x 3,897 ops/sec ±3.01% (25 runs sampled) [updatedFieldsCount: 24427, renderFieldsCount: 2502]
+Agile State x 8,355 ops/sec ±0.85% (67 runs sampled) [updatedFieldsCount: 46249, renderFieldsCount: 173]
+Agile nested State x 18,641 ops/sec ±1.17% (63 runs sampled) [updatedFieldsCount: 98669, renderFieldsCount: 6802]
+Hookstate x 14,865 ops/sec ±2.51% (61 runs sampled) [updatedFieldsCount: 81616, renderFieldsCount: 81715]
+Jotai x 12,676 ops/sec ±3.09% (61 runs sampled) [updatedFieldsCount: 65930, renderFieldsCount: 66029]
+Mobx x 1,812 ops/sec ±1.49% (63 runs sampled) [updatedFieldsCount: 9639, renderFieldsCount: 963900]
+Nano Stores x 16,283 ops/sec ±1.39% (62 runs sampled) [updatedFieldsCount: 84772, renderFieldsCount: 84871]
+Recoil x 9,418 ops/sec ±2.94% (62 runs sampled) [updatedFieldsCount: 52425, renderFieldsCount: 52624]
+Redux x 1,896 ops/sec ±1.74% (62 runs sampled) [updatedFieldsCount: 10133, renderFieldsCount: 1013400]
+Valtio x 472 ops/sec ±2.97% (61 runs sampled) [updatedFieldsCount: 2494, renderFieldsCount: 498700]
+
+// 1000 Fields
+Agile Collection x 503 ops/sec ±2.23% (62 runs sampled) [updatedFieldsCount: 2616, renderFieldsCount: 3520]
+Agile State x 1,437 ops/sec ±1.48% (59 runs sampled) [updatedFieldsCount: 7569, renderFieldsCount: 1061]
+Agile nested State x 9,411 ops/sec ±1.54% (56 runs sampled) [updatedFieldsCount: 46693, renderFieldsCount: 33243]
+Hookstate x 4,539 ops/sec ±3.61% (27 runs sampled) [updatedFieldsCount: 26381, renderFieldsCount: 27380]
+Jotai x 4,014 ops/sec ±5.35% (53 runs sampled) [updatedFieldsCount: 20390, renderFieldsCount: 21389]
+Mobx x 151 ops/sec ±0.75% (59 runs sampled) [updatedFieldsCount: 786, renderFieldsCount: 786000]
+Nano Stores x 5,511 ops/sec ±6.27% (32 runs sampled) [updatedFieldsCount: 31266, renderFieldsCount: 32265]
+Recoil x 3,562 ops/sec ±3.16% (58 runs sampled) [updatedFieldsCount: 18503, renderFieldsCount: 20502]
+Redux x 165 ops/sec ±1.40% (57 runs sampled) [updatedFieldsCount: 858, renderFieldsCount: 859000]
+Valtio x 38.76 ops/sec ±5.50% (42 runs sampled) [updatedFieldsCount: 215, renderFieldsCount: 429000]
 ```
 
 ## Computed

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

@@ -3,47 +3,65 @@ import ReactDom from 'react-dom';
 import { Agile, Logger } from '@agile-ts/core';
 import { useAgile, useValue } from '@agile-ts/react';
 
-const AgileApp = new Agile({ logConfig: { level: Logger.level.ERROR } });
-
-const FIELDS = AgileApp.createCollection({
-  initialData: Array.from(Array(1000).keys()).map((i) => ({
-    id: i,
-    name: `Field #${i + 1}`,
-  })),
-});
-
-function Field({ index }: { index: number | string }) {
-  const ITEM = FIELDS.getItem(index);
-  const item = useAgile(ITEM);
-
-  return (
-    <div>
-      Last {`<Field>`} render at: {new Date().toISOString()}
-      &nbsp;
-      <input
-        value={item?.name}
-        onChange={(e) => ITEM?.patch({ name: e.target.value })}
-      />
-    </div>
-  );
-}
+export default function (target: HTMLElement, fieldsCount: number) {
+  const AgileApp = new Agile({ logConfig: { level: Logger.level.ERROR } });
+
+  const FIELDS = AgileApp.createCollection({
+    initialData: Array.from(Array(fieldsCount).keys()).map((i) => ({
+      id: i,
+      name: `Field #${i + 1}`,
+    })),
+  });
+
+  let updatedFieldsCount = 0;
+  let renderFieldsCount = 0;
 
-function App() {
-  const fieldKeys = useValue(FIELDS);
+  function Field({ index }: { index: number | string }) {
+    const ITEM = FIELDS.getItem(index);
+    const item = useAgile(ITEM);
 
-  return (
-    <div>
+    renderFieldsCount++;
+
+    return (
       <div>
-        Last {`<App>`} render at: {new Date().toISOString()}
+        Last {`<Field>`} render at: {new Date().toISOString()}
+        &nbsp;
+        <input
+          value={item?.name}
+          onChange={(e) => {
+            ITEM?.patch({ name: e.target.value });
+
+            updatedFieldsCount++;
+
+            (document.getElementById(
+              'updatedFieldsCount'
+            ) as any).innerText = updatedFieldsCount;
+            (document.getElementById(
+              'renderFieldsCount'
+            ) as any).innerText = renderFieldsCount;
+          }}
+        />
       </div>
-      <br />
-      {fieldKeys.map((key, i) => (
-        <Field key={i} index={key} />
-      ))}
-    </div>
-  );
-}
+    );
+  }
+
+  function App() {
+    const fieldKeys = useValue(FIELDS);
+
+    return (
+      <div>
+        <div>
+          Last {`<App>`} render at: {new Date().toISOString()}
+        </div>
+        <br />
+        {fieldKeys.map((key, i) => (
+          <Field key={i} index={key} />
+        ))}
+        <div id={'updatedFieldsCount'} />
+        <div id={'renderFieldsCount'} />
+      </div>
+    );
+  }
 
-export default function (target: HTMLElement) {
   ReactDom.render(<App key={'agilets-collection'} />, target);
 }

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

@@ -3,54 +3,62 @@ import * as ReactDom from 'react-dom';
 import { Agile, Logger, State } from '@agile-ts/core';
 import { useAgile } from '@agile-ts/react';
 
-const AgileApp = new Agile({ logConfig: { level: Logger.level.ERROR } });
-
-const FIELDS = AgileApp.createState(
-  Array.from(Array(1000).keys()).map((i) =>
-    AgileApp.createState(`Field #${i + 1}`)
-  )
-);
-
-let updatedFieldsCount = 0;
-
-function Field({ field }: { field: State<string> }) {
-  const name = useAgile(field);
-
-  updatedFieldsCount++;
-
-  return (
-    <div>
-      Last {`<Field>`} render at: {new Date().toISOString()}
-      &nbsp;
-      <input
-        value={name}
-        onChange={(e) => {
-          field.set(e.target.value);
-          (document.getElementById(
-            'updatedFieldsCount'
-          ) as any).innerText = updatedFieldsCount;
-        }}
-      />
-    </div>
+export default function (target: HTMLElement, fieldsCount: number) {
+  const AgileApp = new Agile({ logConfig: { level: Logger.level.ERROR } });
+
+  const FIELDS = AgileApp.createState(
+    Array.from(Array(fieldsCount).keys()).map((i) =>
+      AgileApp.createState(`Field #${i + 1}`)
+    )
   );
-}
 
-function App() {
-  const fields = useAgile(FIELDS);
-  return (
-    <div>
+  let updatedFieldsCount = 0;
+  let renderFieldsCount = 0;
+
+  function Field({ field }: { field: State<string> }) {
+    const name = useAgile(field);
+
+    renderFieldsCount++;
+
+    return (
+      <div>
+        Last {`<Field>`} render at: {new Date().toISOString()}
+        &nbsp;
+        <input
+          value={name}
+          onChange={(e) => {
+            field.set(e.target.value);
+
+            updatedFieldsCount++;
+
+            (document.getElementById(
+              'updatedFieldsCount'
+            ) as any).innerText = updatedFieldsCount;
+            (document.getElementById(
+              'renderFieldsCount'
+            ) as any).innerText = renderFieldsCount;
+          }}
+        />
+      </div>
+    );
+  }
+
+  function App() {
+    const fields = useAgile(FIELDS);
+    return (
       <div>
-        Last {`<App>`} render at: {new Date().toISOString()}
+        <div>
+          Last {`<App>`} render at: {new Date().toISOString()}
+        </div>
+        <br />
+        {fields.map((field, index) => (
+          <Field key={index} field={field} />
+        ))}
+        <div id={'updatedFieldsCount'} />
+        <div id={'renderFieldsCount'} />
       </div>
-      <br />
-      {fields.map((field, index) => (
-        <Field key={index} field={field} />
-      ))}
-      <div id={'updatedFieldsCount'} />
-    </div>
-  );
-}
+    );
+  }
 
-export default function (target: HTMLElement) {
   ReactDom.render(<App key={'agilets-nested-state'} />, target);
 }