server sim

Author: ntucker

examples/benchmark-react/bench/runner.ts

@@ -249,6 +249,8 @@ async function runScenario(
     state: 'attached',
   });
 
+  await (bench as any).evaluate((api: any) => api.flushPendingMutations());
+
   if (scenario.networkDelayMs) {
     await (bench as any).evaluate((api: any) => api.setNetworkDelay(0));
   }

examples/benchmark-react/src/baseline/index.tsx

@@ -82,6 +82,7 @@ function TripleListView() {
     <div style={TRIPLE_LIST_STYLE}>
       {openItems.length > 0 && (
         <div data-status-list="open">
+          <span data-status-count>{openItems.length}</span>
           <List
             style={LIST_STYLE}
             rowHeight={ITEM_HEIGHT}
@@ -93,6 +94,7 @@ function TripleListView() {
       )}
       {closedItems.length > 0 && (
         <div data-status-list="closed">
+          <span data-status-count>{closedItems.length}</span>
           <List
             style={LIST_STYLE}
             rowHeight={ITEM_HEIGHT}
@@ -104,6 +106,7 @@ function TripleListView() {
       )}
       {inProgressItems.length > 0 && (
         <div data-status-list="in_progress">
+          <span data-status-count>{inProgressItems.length}</span>
           <List
             style={LIST_STYLE}
             rowHeight={ITEM_HEIGHT}
@@ -165,17 +168,36 @@ function BenchmarkHarness() {
     setInProgressItems([]);
   }, [unmountBase]);
 
+  const refetchActiveList = useCallback(() => {
+    if (tripleListCount != null) {
+      return Promise.all([
+        ItemResource.getList({ status: 'open', count: tripleListCount }).then(
+          setOpenItems,
+        ),
+        ItemResource.getList({
+          status: 'closed',
+          count: tripleListCount,
+        }).then(setClosedItems),
+        ItemResource.getList({
+          status: 'in_progress',
+          count: tripleListCount,
+        }).then(setInProgressItems),
+      ]);
+    }
+    return ItemResource.getList({ count: listViewCount! }).then(setItems);
+  }, [listViewCount, tripleListCount]);
+
   const updateEntity = useCallback(
     (id: string) => {
       const item = FIXTURE_ITEMS_BY_ID.get(id);
       if (!item) return;
       measureUpdate(() =>
         ItemResource.update({ id }, { label: `${item.label} (updated)` }).then(
-          () => ItemResource.getList({ count: listViewCount! }).then(setItems),
+          refetchActiveList,
         ),
       );
     },
-    [measureUpdate, listViewCount],
+    [measureUpdate, refetchActiveList],
   );
 
   const updateAuthor = useCallback(
@@ -186,32 +208,26 @@ function BenchmarkHarness() {
         AuthorResource.update(
           { id: authorId },
           { name: `${author.name} (updated)` },
-        ).then(() =>
-          ItemResource.getList({ count: listViewCount! }).then(setItems),
-        ),
+        ).then(refetchActiveList),
       );
     },
-    [measureUpdate, listViewCount],
+    [measureUpdate, refetchActiveList],
   );
 
   const unshiftItem = useCallback(() => {
     const author = FIXTURE_AUTHORS[0];
     measureUpdate(() =>
-      ItemResource.create({ label: 'New Item', author }).then(() =>
-        ItemResource.getList({ count: listViewCount! }).then(setItems),
+      ItemResource.create({ label: 'New Item', author }).then(
+        refetchActiveList,
       ),
     );
-  }, [measureUpdate, listViewCount]);
+  }, [measureUpdate, refetchActiveList]);
 
   const deleteEntity = useCallback(
     (id: string) => {
-      measureUpdate(() =>
-        ItemResource.delete({ id }).then(() =>
-          ItemResource.getList({ count: listViewCount! }).then(setItems),
-        ),
-      );
+      measureUpdate(() => ItemResource.delete({ id }).then(refetchActiveList));
     },
-    [measureUpdate, listViewCount],
+    [measureUpdate, refetchActiveList],
   );
 
   const moveItem = useCallback(
@@ -238,16 +254,22 @@ function BenchmarkHarness() {
           const source = containerRef.current?.querySelector(
             '[data-status-list="open"]',
           );
-          return source?.querySelector(`[data-item-id="${id}"]`) == null;
+          const dest = containerRef.current?.querySelector(
+            '[data-status-list="closed"]',
+          );
+          return (
+            source?.querySelector(`[data-item-id="${id}"]`) == null &&
+            dest?.querySelector(`[data-item-id="${id}"]`) != null
+          );
         },
       );
     },
     [measureUpdate, tripleListCount, containerRef],
   );
 
   const mountSortedView = useCallback(
-    (n: number) => {
-      seedItemList(FIXTURE_ITEMS.slice(0, n));
+    async (n: number) => {
+      await seedItemList(FIXTURE_ITEMS.slice(0, n));
       measureMount(() => {
         setShowSortedView(true);
       });

examples/benchmark-react/src/data-client/index.tsx

@@ -64,6 +64,7 @@ function StatusListView({ status, count }: { status: string; count: number }) {
   const list = items as Item[];
   return (
     <div data-status-list={status}>
+      <span data-status-count>{list.length}</span>
       <List
         style={LIST_STYLE}
         rowHeight={ITEM_HEIGHT}
@@ -164,16 +165,22 @@ function BenchmarkHarness() {
           const source = containerRef.current?.querySelector(
             '[data-status-list="open"]',
           );
-          return source?.querySelector(`[data-item-id="${id}"]`) == null;
+          const dest = containerRef.current?.querySelector(
+            '[data-status-list="closed"]',
+          );
+          return (
+            source?.querySelector(`[data-item-id="${id}"]`) == null &&
+            dest?.querySelector(`[data-item-id="${id}"]`) != null
+          );
         },
       );
     },
     [measureUpdate, controller, containerRef],
   );
 
   const mountSortedView = useCallback(
-    (n: number) => {
-      seedItemList(FIXTURE_ITEMS.slice(0, n));
+    async (n: number) => {
+      await seedItemList(FIXTURE_ITEMS.slice(0, n));
       measureMount(() => {
         setSortedViewCount(n);
         setShowSortedView(true);
@@ -183,10 +190,10 @@ function BenchmarkHarness() {
   );
 
   const invalidateAndResolve = useCallback(
-    (id: string) => {
-      const item = getItem(id);
+    async (id: string) => {
+      const item = await getItem(id);
       if (item) {
-        patchItem(id, { label: `${item.label} (refetched)` });
+        await patchItem(id, { label: `${item.label} (refetched)` });
       }
       measureUpdate(
         () => {

examples/benchmark-react/src/shared/benchHarness.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { captureSnapshot, getReport } from './refStability';
-import { setNetworkDelay } from './server';
+import { flushPendingMutations, setNetworkDelay } from './server';
 import type { BenchAPI } from './types';
 
 export function afterPaint(fn: () => void): void {
@@ -190,6 +190,7 @@ export function useBenchState() {
       captureRefSnapshot,
       getRefStabilityReport,
       setNetworkDelay,
+      flushPendingMutations,
       ...libraryActions,
     } as BenchAPI;
   };

examples/benchmark-react/src/shared/components.tsx

@@ -8,18 +8,27 @@ export const VISIBLE_COUNT = 40;
 export const LIST_STYLE = { height: ITEM_HEIGHT * VISIBLE_COUNT } as const;
 export const TRIPLE_LIST_STYLE = { display: 'flex', gap: 8 } as const;
 
+const PRIORITY_LABELS = ['', 'low', 'med', 'high', 'crit', 'max'] as const;
+
 /**
- * Pure presentational component - no data-fetching logic.
- * Each library app wraps this with its own data-fetching hook.
+ * Memoized row component. With referential equality (data-client, tanstack-query),
+ * unchanged items skip this entirely. Without it (SWR, baseline), every row
+ * re-renders on any list change — the extra render weight makes that visible.
  */
-export function ItemRow({ item }: { item: Item }) {
+export const ItemRow = React.memo(function ItemRow({ item }: { item: Item }) {
+  const tagStr = item.tags.join(', ');
+  const prioLabel = PRIORITY_LABELS[item.priority] ?? item.priority;
   return (
     <div data-item-id={item.id} data-bench-item>
       <span data-label>{item.label}</span>
       <span data-author>{item.author.name}</span>
+      <span data-priority>{prioLabel}</span>
+      <span data-status>{item.status}</span>
+      <span data-tags>{tagStr}</span>
+      <span data-desc>{item.description}</span>
     </div>
   );
-}
+});
 
 /** Generic react-window row that renders an ItemRow from an items array. */
 export function ItemsRow({

examples/benchmark-react/src/shared/resources.ts

@@ -54,6 +54,14 @@ class ItemCollection<
   S extends any[] | PolymorphicInterface = any,
   Parent extends any[] = [urlParams: any, body?: any],
 > extends Collection<S, Parent> {
+  constructor(schema: S, options?: any) {
+    super(schema, options);
+    (this as any).move = this.moveWith((existing: any, incoming: any) => [
+      ...incoming,
+      ...existing,
+    ]);
+  }
+
   nonFilterArgumentKeys(key: string) {
     return key === 'count';
   }
@@ -70,7 +78,7 @@ export const ItemResource = resource({
     dataExpiryLength: Infinity,
   }),
   getList: Base.getList.extend({
-    fetch: serverFetchItemList,
+    fetch: serverFetchItemList as any,
     dataExpiryLength: Infinity,
   }),
   update: Base.update.extend({
@@ -81,7 +89,8 @@ export const ItemResource = resource({
     fetch: serverDeleteItem as any,
   }),
   create: Base.getList.unshift.extend({
-    fetch: serverCreateItem as any,
+    fetch: ((...args: any[]) =>
+      serverCreateItem(args.length > 1 ? args[1] : args[0])) as any,
     body: {} as {
       label: string;
       author: Author;