Made cell flushing async in general and only keep it sync while scrolling. release version patch

Author: radubrehar

examples/src/pages/tests/table/props/data/update.page.tsx

@@ -0,0 +1,163 @@
+import * as React from 'react';
+
+import {
+  InfiniteTable,
+  DataSource,
+  InfiniteTablePropColumns,
+  DataSourceApi,
+  InfiniteTableApi,
+  DataSourceDataFn,
+  InfiniteTableProps,
+} from '@infinite-table/infinite-react';
+import { Button } from '@/components/ui/button';
+
+type Developer = {
+  id: number;
+  firstName: string;
+  lastName: string;
+  country: string;
+  city: string;
+  currency: string;
+  preferredLanguage: string;
+  stack: string;
+  canDesign: 'yes' | 'no';
+  hobby: string;
+  salary: number;
+  age: number;
+};
+
+const columns: InfiniteTablePropColumns<Developer> = {
+  // id: { field: 'id' },
+  salary: { field: 'salary' },
+  age: { field: 'age' },
+  firstName: { field: 'firstName' },
+  // preferredLanguage: { field: 'preferredLanguage' },
+  // lastName: { field: 'lastName' },
+  // country: { field: 'country' },
+  // city: { field: 'city' },
+  // currency: { field: 'currency' },
+  // stack: { field: 'stack' },
+  // canDesign: { field: 'canDesign' },
+};
+
+const dataSourceFn: DataSourceDataFn<Developer> = ({}) => {
+  return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers1k-sql`)
+    .then((r) => r.json())
+    .then((data) => {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          // console.log(data, 'data');
+          // data.length = 1;
+          // const newData = [...data.data.slice(0, 3)];
+          const newData = data;
+
+          resolve(newData);
+        }, 20);
+      });
+    });
+};
+
+export default function DataTestPage() {
+  const [active, setActive] = React.useState([true, true]);
+  const [ds, setDs] = React.useState<DataSourceDataFn<Developer>>(
+    () => dataSourceFn,
+  );
+  const [dataSourceApi, setDataSourceApi] =
+    React.useState<DataSourceApi<Developer>>();
+  const [activeCellIndex, setActiveCellIndex] = React.useState<
+    [number, number] | null
+  >(null);
+  const [api, setApi] = React.useState<InfiniteTableApi<Developer>>();
+  const [header, setHeader] = React.useState<boolean>(false);
+
+  const onReady = React.useCallback(
+    ({
+      dataSourceApi,
+      api,
+    }: {
+      dataSourceApi: DataSourceApi<Developer>;
+      api: InfiniteTableApi<Developer>;
+    }) => {
+      setDataSourceApi(dataSourceApi);
+      setApi(api);
+    },
+    [],
+  );
+
+  const domProps: InfiniteTableProps<Developer>['domProps'] =
+    React.useMemo(() => {
+      return {
+        style: {
+          margin: '5px',
+          height: 900,
+          border: '1px solid gray',
+          position: 'relative',
+        },
+      };
+    }, []);
+  return (
+    <React.StrictMode>
+      <div className="flex gap-2 items-center justify-center m-1">
+        <Button
+          onClick={() => {
+            if (!dataSourceApi || !api) {
+              return;
+            }
+
+            const { start, end } = api.getVisibleRenderRange();
+            const [startRow, startCol] = start;
+            const [endRow, endCol] = end;
+            // console.log(start, end);
+
+            const randomRow =
+              Math.floor(Math.random() * (endRow - startRow + 1)) + startRow;
+            const randomCol =
+              Math.floor(Math.random() * (endCol - startCol + 1)) + startCol;
+
+            const [activeRow, activeCol] = activeCellIndex || [];
+
+            const updateRow = activeRow ?? randomRow;
+            const updateCol = activeCol ?? randomCol;
+            const colId = Object.keys(columns)[updateCol];
+            const rowId = dataSourceApi.getPrimaryKeyByIndex(updateRow);
+            dataSourceApi.updateData({
+              [colId]: Math.floor(Math.random() * 10000),
+              id: rowId,
+            });
+
+            // dataSourceApi.get
+            // dataSourceApi.;
+          }}
+        >
+          update
+        </Button>
+        <Button
+          onClick={() => {
+            setDs(dataSourceFn.bind(null));
+          }}
+        >
+          update datasource
+        </Button>
+        <Button
+          onClick={() => {
+            setHeader((header) => !header);
+          }}
+        >
+          toggle header
+        </Button>
+      </div>
+      {active[0] && (
+        <DataSource<Developer> data={ds} primaryKey="id">
+          <InfiniteTable<Developer>
+            header={header}
+            onActiveCellIndexChange={setActiveCellIndex}
+            debugId="test"
+            onReady={onReady}
+            domProps={domProps}
+            columns={columns}
+          />
+        </DataSource>
+      )}
+    </React.StrictMode>
+  );
+}

source/src/components/DataSource/types.ts

@@ -124,13 +124,15 @@ export type DataSourceRemoteData<T> = {
   livePaginationCursor?: DataSourceLivePaginationCursorValue;
 };
 
+export type DataSourceDataFn<T> = (
+  dataInfo: DataSourceDataParams<T>,
+) => T[] | Promise<T[] | DataSourceRemoteData<T>>;
+
 export type DataSourceData<T> =
   | T[]
   | DataSourceRemoteData<T>
   | Promise<T[] | DataSourceRemoteData<T>>
-  | ((
-      dataInfo: DataSourceDataParams<T>,
-    ) => T[] | Promise<T[] | DataSourceRemoteData<T>>);
+  | DataSourceDataFn<T>;
 
 export type DataSourceGroupRowsList<KeyType = any> = true | KeyType[][];
 

source/src/components/HeadlessTable/GridCellInterface.ts

@@ -2,7 +2,13 @@ import { Renderable } from '../types/Renderable';
 
 export interface GridCellInterface<T_ADDITIONAL_CELL_INFO = any> {
   debugId: string;
-  update(content: Renderable, additionalInfo?: T_ADDITIONAL_CELL_INFO): void;
+  update(
+    content: Renderable,
+    additionalInfo?: T_ADDITIONAL_CELL_INFO,
+    scrollingObjectParam?: {
+      scrolling: boolean;
+    },
+  ): void;
   getElement(): HTMLElement | null;
   getNode(): Renderable;
   destroy(): void;

source/src/components/HeadlessTable/GridCellManager.ts

@@ -185,6 +185,9 @@ export class GridCellManager<T_ADDITIONAL_CELL_INFO> extends Logger {
     cell: GridCellInterface<T_ADDITIONAL_CELL_INFO>,
     cellPos: CellPos,
     additionalInfo?: T_ADDITIONAL_CELL_INFO,
+    scrollingObjectParam?: {
+      scrolling: boolean;
+    },
   ) {
     const currentCellAtPos = this.getCellAt(cellPos);
 
@@ -199,7 +202,7 @@ export class GridCellManager<T_ADDITIONAL_CELL_INFO> extends Logger {
 
     this.setCellPositionInMatrix(cell, cellPos);
 
-    cell.update(node, additionalInfo);
+    cell.update(node, additionalInfo, scrollingObjectParam);
 
     return cell;
   }

source/src/components/HeadlessTable/GridCellPoolForReact.tsx

@@ -26,6 +26,8 @@ class GridCellForReact<T_ADDITIONAL_CELL_INFO = any>
 
   private mounted: boolean = false;
 
+  private IS_UPDATED_WHILE_SCROLLING = false;
+
   private mountSubscription =
     buildSubscriptionCallback<GridCellInterface<T_ADDITIONAL_CELL_INFO>>();
 
@@ -39,7 +41,14 @@ class GridCellForReact<T_ADDITIONAL_CELL_INFO = any>
 
     this.updater = buildSubscriptionCallback<Renderable>();
 
-    this.node = <AvoidReactDiff key={key} name={key} updater={this.updater} />;
+    this.node = (
+      <AvoidReactDiff
+        key={key}
+        name={key}
+        updater={this.updater}
+        shouldFlushSync={this.isUpdatedWhileScrolling}
+      />
+    );
 
     this.ref = (htmlElement) => {
       this.element = htmlElement;
@@ -52,6 +61,10 @@ class GridCellForReact<T_ADDITIONAL_CELL_INFO = any>
     };
   }
 
+  isUpdatedWhileScrolling = () => {
+    return this.IS_UPDATED_WHILE_SCROLLING;
+  };
+
   isMounted() {
     return this.mounted;
   }
@@ -79,7 +92,16 @@ class GridCellForReact<T_ADDITIONAL_CELL_INFO = any>
     return this.node;
   }
 
-  update(content: Renderable, additionalInfo?: T_ADDITIONAL_CELL_INFO): void {
+  update(
+    content: Renderable,
+    additionalInfo?: T_ADDITIONAL_CELL_INFO,
+    scrollingObjectParam?: {
+      scrolling: boolean;
+    },
+  ): void {
+    this.IS_UPDATED_WHILE_SCROLLING = scrollingObjectParam
+      ? scrollingObjectParam.scrolling
+      : false;
     this.updater(content);
     this.cellInfo = additionalInfo;
   }

source/src/components/HeadlessTable/ReactHeadlessTableRenderer.tsx

@@ -42,6 +42,10 @@ export const columnOffsetAtIndexWhileReordering = stripVar(
   InternalVars.columnOffsetAtIndexWhileReordering,
 );
 
+const SCROLLING_OBJECT_PARAM_FLYWEIGHT = {
+  scrolling: false,
+};
+
 export class GridRenderer extends Logger {
   protected brain: MatrixBrain;
 
@@ -1364,11 +1368,13 @@ export class GridRenderer extends Logger {
 
       return;
     }
+    SCROLLING_OBJECT_PARAM_FLYWEIGHT.scrolling = this.scrolling;
     this.cellManager.renderNodeAtCell(
       renderedNode,
       cell,
       [rowIndex, colIndex],
       cellAdditionalInfo,
+      SCROLLING_OBJECT_PARAM_FLYWEIGHT,
     );
 
     this.updateElementPosition(cell, { hidden, rowspan, colspan });

source/src/components/InfiniteTable/api/getImperativeApi.ts

@@ -121,6 +121,10 @@ class InfiniteTableApiImpl<T> implements InfiniteTableApi<T> {
     this.getState().scrollerDOMRef.current?.focus();
   }
 
+  getVisibleRenderRange = () => {
+    return this.getState().brain.getRenderRange();
+  };
+
   hideContextMenu() {
     this.actions.contextMenuVisibleFor = null;
     this.actions.cellContextMenuVisibleFor = null;

source/src/components/InfiniteTable/types/InfiniteTableProps.ts

@@ -295,6 +295,7 @@ export interface InfiniteTableApi<T> {
   realignColumnContextMenu: () => void;
   getColumnOrder: () => string[];
   getVisibleColumnOrder: () => string[];
+  getVisibleRenderRange: () => TableRenderRange;
   getComputedColumnById: (
     colId: string,
   ) => InfiniteTableComputedColumn<T> | undefined;

source/src/components/RawList/AvoidReactDiff.tsx

@@ -9,13 +9,19 @@ export type AvoidReactDiffProps = {
   name?: string;
   useraf?: boolean;
   updater: SubscriptionCallback<Renderable>;
+  shouldFlushSync?: () => boolean;
 };
 
+const SHOULD_FLUSH_SYNC = () => false;
+
 function AvoidReactDiffFn(props: AvoidReactDiffProps) {
   const [children, setChildren] = useState<Renderable>(props.updater.get);
 
   const rafId = useRef<any>(null);
 
+  // const shouldFlushSync = SHOULD_FLUSH_SYNC;
+  const shouldFlushSync = props.shouldFlushSync ?? SHOULD_FLUSH_SYNC;
+
   // prev react 19 we had useEffect here
   // but there are situations when the updater would be called
   // after initial render and before useEffect triggered
@@ -26,23 +32,33 @@ function AvoidReactDiffFn(props: AvoidReactDiffProps) {
       // so when updater triggers a change
       // we can re-render and set the children
 
+      let FLUSH_SYNC = shouldFlushSync();
+
       if (props.useraf) {
         if (rafId.current != null) {
           cancelAnimationFrame(rafId.current);
         }
         rafId.current = requestAnimationFrame(() => {
+          if (FLUSH_SYNC) {
+            queueMicrotask(() => {
+              flushSync(() => {
+                setChildren(children);
+              });
+            });
+          } else {
+            setChildren(children);
+          }
+        });
+      } else {
+        if (FLUSH_SYNC) {
           queueMicrotask(() => {
             flushSync(() => {
               setChildren(children);
             });
           });
-        });
-      } else {
-        queueMicrotask(() => {
-          flushSync(() => {
-            setChildren(children);
-          });
-        });
+        } else {
+          setChildren(children);
+        }
       }
     }
     const remove = props.updater.onChange(onChange);
@@ -53,7 +69,7 @@ function AvoidReactDiffFn(props: AvoidReactDiffProps) {
       }
       remove();
     };
-  }, [props.updater, props.useraf]);
+  }, [props.updater, props.useraf, shouldFlushSync]);
 
   return (children as React.ReactNode) ?? null;
 }