move performance demo to a separate app

Author: avkonst

docs/demos/strictmode/README.md

@@ -1,10 +1,18 @@
-# Strict mode application demo
+# Strict mode and performance application demo
+
+Frequent state updates demo. 10K cells table updating 1 cell every millisecond(*).
+
+* - results maybe different depending on a machine performance
 
 ## Workflow
 
 From the repository root directory:
 
 - `pnpm install`
-- `pnpm nx build strictmode`
-- `pnpm nx start strictmode`
-- `pnpm nx test strictmode`
+- `pnpm nx start strictmode` - slow performance demo, for debugging only
+- `pnpm nx build strictmode` - build in release mode
+- `pnpm nx serve strictmode` - open in browser and see it running
+
+## Screenshot
+
+![frequent state updates](hookstate-performance-demo.png "Hookstate frequent state updates demo")

docs/demos/strictmode/hookstate-performance-demo.png

@@ -15,12 +15,14 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "serve": "14.1.2",
     "typescript": "^4.7.4",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
+    "serve": "serve -s build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "update:deps": "ncu -u"
@@ -43,4 +45,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

docs/demos/strictmode/package.json

@@ -1,9 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import App from './App';
+import { App } from './App';
 
 test('renders learn react link', () => {
   render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
 });

docs/demos/strictmode/src/App.test.tsx

@@ -1,73 +1,172 @@
-import { hookstate, State, useHookstate } from '@hookstate/core';
-import { useEffect } from 'react';
-import './App.css';
+import React, { useEffect } from 'react';
+import { useHookstate, State } from '@hookstate/core';
 
-const createId = () => {
-  return Math.floor(Math.random() * 0xffffff).toString(16);
-};
-
-interface IItem {
-  id: string;
-  kind: string;
-  type: string;
+const TableCell = (props: { cell: State<number> }) => {
+  const scopedState = useHookstate(props.cell);
+  return <>{scopedState.value.toString(16)}</>;
 }
 
-interface IAppState {
-  items: Record<string, IItem>;
+type StatsExtension = {
+  stats: {
+    totalSum: number;
+    totalCalls: number;
+    startTime: number;
+  };
 }
 
-const appState = hookstate<IAppState>({
-  items: {
-    initial: {
-      id: 'initial',
-      kind: 'UNKNOWN',
-      type: 'test',
-    },
-  },
-});
-
-function App() {
-  const state = useHookstate(appState);
+const MatrixView = (props: {
+  totalRows: number,
+  totalColumns: number,
+  interval: number,
+  callsPerInterval: number
+}) => {
+  const matrix = useHookstate(
+    () => Array.from(Array(props.totalRows).keys())
+      .map(i => Array.from(Array(props.totalColumns).keys()).map(j => 0)),
+    () => {
+      const stats = {
+        totalSum: 0,
+        totalCalls: 0,
+        startTime: (new Date()).getTime()
+      };
 
+      let previous = 0;
+      return {
+        onCreate: () => ({
+          stats: () => stats
+        }),
+        onPreset: (s) => {
+          if (s.path.length === 2) {
+            previous = s.get({ stealth: true });
+          }
+        },
+        onSet: (s) => {
+          if (s.path.length === 2) {
+            // new value can be only number in this example
+            // and path can contain only 2 elements: row and column indexes
+            stats.totalSum += s.value - previous;
+          }
+          stats.totalCalls += 1;
+        }
+      }
+    }
+  );
+  // schedule interval updates
   useEffect(() => {
-    console.log('Keys changed.');
-  }, [state.items.keys]);
+    const t = setInterval(() => {
+      function randomInt(min: number, max: number) {
+        min = Math.ceil(min);
+        max = Math.floor(max);
+        return Math.floor(Math.random() * (max - min)) + min;
+      }
+      for (let i = 0; i < props.callsPerInterval; i += 1) {
+        matrix
+        [randomInt(0, props.totalRows)]
+        [randomInt(0, props.totalColumns)]
+          .set(p => p + randomInt(0, 5))
+      }
+    }, props.interval)
+    return () => clearInterval(t);
+  }, [props.interval, props.callsPerInterval, props.totalRows, props.totalColumns])
+
+  return <div style={{ overflow: 'scroll' }}>
+    <PerformanceMeter matrix={matrix} />
+    <table
+      style={{
+        border: 'solid',
+        borderWidth: 1,
+        borderColor: 'grey',
+        color: '#00FF00',
+        backgroundColor: 'black'
+      }}
+    >
+      <tbody>
+        {matrix.map((rowState, rowIndex: number) =>
+          <tr key={rowIndex}>
+            {rowState.map((cellState, columnIndex) =>
+              <td key={columnIndex}>
+                <TableCell cell={cellState} />
+              </td>
+            )}
+          </tr>
+        )}
+      </tbody>
+    </table>
+  </div>
+}
 
-  return (
+export const ExampleComponent = () => {
+  const settings = useHookstate({
+    rows: 50,
+    columns: 50,
+    rate: 50,
+    timer: 10
+  })
+  return <>
     <div>
-      <div>
-        <button
-          onClick={() => {
-            const id = createId();
-            // state.items.merge({ [id]: { id, kind: 'UNKNOWN', type: 'test' } });
-            state.items[id].set({ id, kind: 'UNKNOWN', type: 'test' });
-          }}
-        >
-          Add
-        </button>
-      </div>
-      <div>
-        {state.items.keys.map((itemId) => (
-          <Item key={itemId} state={state.items[itemId]} />
-        ))}
-      </div>
+      <p><span>Total rows: {settings.rows.value} </span>
+        <button onClick={() =>
+          settings.rows.set(p => (p - 10) || 10)}>-10</button>
+        <button onClick={() =>
+          settings.rows.set(p => p + 10)}>+10</button></p>
+      <p><span>Total columns: {settings.columns.value} </span>
+        <button onClick={() =>
+          settings.columns.set(p => (p - 10) || 10)}>-10</button>
+        <button onClick={() =>
+          settings.columns.set(p => p + 10)}>+10</button></p>
+      <p>Total cells: {settings.columns.value * settings.rows.value}</p>
+      <p><span>Cells to update per timer interval: {settings.rate.value} </span>
+        <button onClick={() =>
+          settings.rate.set(p => (p - 1) || 1)}>-1</button>
+        <button onClick={() =>
+          settings.rate.set(p => p + 1)}>+1</button>
+        <button onClick={() =>
+          settings.rate.set(p => p > 10 ? (p - 10) : 1)}>-10</button>
+        <button onClick={() =>
+          settings.rate.set(p => p + 10)}>+10</button>
+      </p>
+      <p><span>Timer interval in ms: {settings.timer.value} </span>
+        <button onClick={() =>
+          settings.timer.set(p => p > 1 ? (p - 1) : 1)}>-1</button>
+        <button onClick={() =>
+          settings.timer.set(p => p + 1)}>+1</button>
+        <button onClick={() =>
+          settings.timer.set(p => p > 10 ? (p - 10) : 1)}>-10</button>
+        <button onClick={() =>
+          settings.timer.set(p => p + 10)}>+10</button>
+      </p>
     </div>
-  );
+    <MatrixView
+      key={Math.random()}
+      totalRows={settings.rows.value}
+      totalColumns={settings.columns.value}
+      interval={settings.timer.value}
+      callsPerInterval={settings.rate.value}
+    />
+  </>;
 }
 
-function Item(props: { state: State<IItem> }) {
-  const state = useHookstate(props.state);
+function PerformanceMeter(props: { matrix: State<number[][], StatsExtension> }) {
+  let stats = props.matrix.stats;
+  const elapsedMs = () => (new Date()).getTime() - stats.startTime;
+  const elapsed = () => Math.floor(elapsedMs() / 1000);
+  const rate = Math.floor(stats.totalCalls / elapsedMs() * 1000);
 
-  return (
-    <div
-      style={{ padding: 10, backgroundColor: '#' + Math.floor(Math.random() * 0xffffff).toString(16) }}
-      onClick={() => {
-        state.type.set(Math.random().toString(16));
-      }}
-    >
-      {JSON.stringify(state.value)}
-    </div>
-  );
+  // this makes rerendering this component every 200ms
+  let forceRerender = useHookstate(1);
+  useEffect(() => {
+    const interval = setInterval(() => {
+      forceRerender.set(p => p + 1)
+    }, 200)
+    return () => clearInterval(interval)
+  }, [])
+
+  return <>
+    <p><span>Elapsed: {elapsed()}s</span></p>
+    <p><span>Total cells sum: {stats.totalSum}</span></p>
+    <p><span>Total matrix state updates: {stats.totalCalls}</span></p>
+    <p><span>Average update rate: {rate}cells/s</span></p>
+  </>;
 }
 
-export default App;
+export const App = ExampleComponent

docs/demos/strictmode/src/App.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import App from './App';
+import { App } from './App';
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(

docs/demos/strictmode/src/index.tsx

@@ -8,5 +8,6 @@ import { PreviewSample } from '../src/PreviewSample'
 
 Here is an example of 10000 cells table which achieves an update rate 1+ cells per every millisecond.
 
-<PreviewSample example="performance-demo-large-table" />
+Unfortunately, this example cannot run embedded within the documentation. Check it out [here](https://github.com/avkonst/hookstate/tree/master/docs/demos/strictmode).
+
 

docs/index/docs/23-performance-frequent-updates.md

@@ -6,7 +6,6 @@ import { ExampleComponent as ExampleLocalPrimitive } from './local-getting-start
 import { ExampleComponent as ExampleAsyncState } from './local-async-state';
 import { ExampleComponent as ExampleLocalComplexFromDocumentation } from './local-complex-from-documentation';
 import { ExampleComponent as ExampleLocalComplexTreeStructure } from './local-complex-tree-structure';
-import { ExampleComponent as ExamplePerformanceLargeTable } from './performance-demo-large-table';
 import { ExampleComponent as ExamplePerformanceLargeForm } from './performance-demo-large-form';
 import { ExampleComponent as ExampleGlobalMultipleConsumersStateFragment } from './global-multiple-consumers-statefragment';
 
@@ -31,7 +30,6 @@ ExamplesRepo.set('local-getting-started', <ExampleLocalPrimitive />);
 ExamplesRepo.set('local-complex-from-documentation', <ExampleLocalComplexFromDocumentation />);
 ExamplesRepo.set('local-async-state', <ExampleAsyncState />);
 ExamplesRepo.set('local-complex-tree-structure', <ExampleLocalComplexTreeStructure />);
-ExamplesRepo.set('performance-demo-large-table', <ExamplePerformanceLargeTable />);
 ExamplesRepo.set('performance-demo-large-form', <ExamplePerformanceLargeForm />);
 ExamplesRepo.set('global-multiple-consumers-statefragment', <ExampleGlobalMultipleConsumersStateFragment />);