Merge pull request #3213 from timdoherty/issue-3200-react-lazy-load

Issue #3200 React lazy load

Author: adumesny

react/lib/grid-stack-render-provider.tsx

@@ -4,14 +4,18 @@ import {
   useLayoutEffect,
   useMemo,
   useRef,
+  useReducer,
 } from "react";
 import { useGridStackContext } from "./grid-stack-context";
 import { GridStack, GridStackOptions, GridStackWidget } from "gridstack";
 import { GridStackRenderContext } from "./grid-stack-render-context";
 import isEqual from "react-fast-compare";
 
 // WeakMap to store widget containers for each grid instance
-export const gridWidgetContainersMap = new WeakMap<GridStack, Map<string, HTMLElement>>();
+export const gridWidgetContainersMap = new WeakMap<
+  GridStack,
+  Map<string, HTMLElement>
+>();
 
 export function GridStackRenderProvider({ children }: PropsWithChildren) {
   const {
@@ -22,6 +26,7 @@ export function GridStackRenderProvider({ children }: PropsWithChildren) {
   const widgetContainersRef = useRef<Map<string, HTMLElement>>(new Map());
   const containerRef = useRef<HTMLDivElement>(null);
   const optionsRef = useRef<GridStackOptions>(initialOptions);
+  const [renderTick, forceRerender] = useReducer((value) => value + 1, 0);
 
   const renderCBFn = useCallback(
     (element: HTMLElement, widget: GridStackWidget & { grid?: GridStack }) => {
@@ -33,9 +38,15 @@ export function GridStackRenderProvider({ children }: PropsWithChildren) {
           gridWidgetContainersMap.set(widget.grid, containers);
         }
         containers.set(widget.id, element);
-        
+
         // Also update the local ref for backward compatibility
         widgetContainersRef.current.set(widget.id, element);
+
+        if (widget.lazyLoad || optionsRef.current.lazyLoad) {
+          // We need to force a re-render, since React has
+          // already eagerly rendered all widgets in the grid
+          forceRerender();
+        }
       }
     },
     []
@@ -100,7 +111,7 @@ export function GridStackRenderProvider({ children }: PropsWithChildren) {
         }),
         // ! gridStack is required to reinitialize the grid when the options change
         // eslint-disable-next-line react-hooks/exhaustive-deps
-        [gridStack]
+        [gridStack, renderTick]
       )}
     >
       <div ref={containerRef}>{gridStack ? children : null}</div>

react/lib/grid-stack-render.tsx

@@ -1,3 +1,4 @@
+import { useRef, memo } from "react";
 import { createPortal } from "react-dom";
 import { useGridStackContext } from "./grid-stack-context";
 import { useGridStackRenderContext } from "./grid-stack-render-context";
@@ -10,12 +11,24 @@ export interface ComponentDataType<T = object> {
   props: T;
 }
 
+type ParsedComponentData = ComponentDataType & {
+  error: unknown;
+  metaHash: string;
+};
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type ComponentMap = Record<string, ComponentType<any>>;
 
 function parseWeightMetaToComponentData(
-  meta: GridStackWidget
+  meta: GridStackWidget,
+  cache: Map<string, ParsedComponentData>
 ): ComponentDataType & { error: unknown } {
+  const cacheKey = meta.id ?? "";
+  const metaHash = meta.content ?? "";
+  const cached = cache.get(cacheKey);
+  // Ensure componentData is immutable between renders
+  if (cached && cached.metaHash === metaHash) return cached;
+
   let error = null;
   let name = "";
   let props = {};
@@ -31,37 +44,71 @@ function parseWeightMetaToComponentData(
   } catch (e) {
     error = e;
   }
-  return {
+  const parsed: ParsedComponentData = {
     name,
     props,
     error,
+    metaHash,
   };
+  cache.set(cacheKey, parsed);
+  return parsed;
 }
 
+type WidgetMemoProps = {
+  id: string;
+  componentData: ComponentDataType;
+  widgetContainer: HTMLElement;
+  WidgetComponent: ComponentType<unknown>;
+};
+
+const WidgetMemo = memo(
+  ({
+    id,
+    componentData,
+    widgetContainer,
+    WidgetComponent,
+  }: WidgetMemoProps) => {
+    return (
+      <GridStackWidgetContext.Provider value={{ widget: { id } }}>
+        {createPortal(
+          <WidgetComponent {...componentData.props} />,
+          widgetContainer
+        )}
+      </GridStackWidgetContext.Provider>
+    );
+  }
+);
+WidgetMemo.displayName = "WidgetMemo";
+
 export function GridStackRender(props: { componentMap: ComponentMap }) {
   const { _rawWidgetMetaMap } = useGridStackContext();
   const { getWidgetContainer } = useGridStackRenderContext();
+  const parsedCache = useRef<Map<string, ParsedComponentData>>(new Map());
 
   return (
     <>
       {Array.from(_rawWidgetMetaMap.value.entries()).map(([id, meta]) => {
-        const componentData = parseWeightMetaToComponentData(meta);
+        const componentData = parseWeightMetaToComponentData(
+          meta,
+          parsedCache.current
+        );
 
         const WidgetComponent = props.componentMap[componentData.name];
 
         const widgetContainer = getWidgetContainer(id);
 
         if (!widgetContainer) {
-          throw new Error(`Widget container not found for id: ${id}`);
+          return null;
         }
 
         return (
-          <GridStackWidgetContext.Provider key={id} value={{ widget: { id } }}>
-            {createPortal(
-              <WidgetComponent {...componentData.props} />,
-              widgetContainer
-            )}
-          </GridStackWidgetContext.Provider>
+          <WidgetMemo
+            id={id}
+            key={id}
+            componentData={componentData}
+            widgetContainer={widgetContainer}
+            WidgetComponent={WidgetComponent}
+          />
         );
       })}
     </>

react/src/demo/demo.tsx

@@ -130,6 +130,7 @@ const gridOptions: GridStackOptions = {
       y: 2,
     },
   ],
+  lazyLoad: true
 };
 
 export function GridStackDemo() {