memoize getRenderableElements() also on versionNonce

and drop memoization of individual filtering functions, as the elements array may not renew on mutation and we might filter out elements based on individual elements

src/components/App.tsx

@@ -1110,6 +1110,7 @@ class App extends React.Component<AppProps, AppState> {
     const versionNonce = this.scene.getVersionNonce();
     const { canvasElements, visibleElements } =
       this.renderer.getRenderableElements({
+        versionNonce,
         zoom: this.state.zoom,
         offsetLeft: this.state.offsetLeft,
         offsetTop: this.state.offsetTop,

src/components/canvases/InteractiveCanvas.tsx

@@ -175,7 +175,12 @@ const areEqual = (
   if (
     prevProps.selectionNonce !== nextProps.selectionNonce ||
     prevProps.versionNonce !== nextProps.versionNonce ||
-    prevProps.scale !== nextProps.scale
+    prevProps.scale !== nextProps.scale ||
+    // we need to memoize on element arrays because they may have renewed
+    // even if versionNonce didn't change (e.g. we filter elements out based
+    // on appState)
+    prevProps.elements !== nextProps.elements ||
+    prevProps.visibleElements !== nextProps.visibleElements
   ) {
     return false;
   }

src/components/canvases/StaticCanvas.tsx

@@ -94,7 +94,12 @@ const areEqual = (
 ) => {
   if (
     prevProps.versionNonce !== nextProps.versionNonce ||
-    prevProps.scale !== nextProps.scale
+    prevProps.scale !== nextProps.scale ||
+    // we need to memoize on element arrays because they may have renewed
+    // even if versionNonce didn't change (e.g. we filter elements out based
+    // on appState)
+    prevProps.elements !== nextProps.elements ||
+    prevProps.visibleElements !== nextProps.visibleElements
   ) {
     return false;
   }

src/scene/Renderer.ts

@@ -13,8 +13,7 @@ export class Renderer {
   }
 
   public getRenderableElements = (() => {
-    const getVisibleCanvasElements = memoize(
-      ({
+    const getVisibleCanvasElements = ({
       elements,
       zoom,
       offsetLeft,
@@ -42,11 +41,9 @@ export class Renderer {
           scrollY,
         }),
       );
-      },
-    );
+    };
 
-    const getCanvasElements = memoize(
-      ({
+    const getCanvasElements = ({
       editingElement,
       elements,
       pendingImageElementId,
@@ -72,10 +69,10 @@ export class Renderer {
           element.id !== editingElement.id
         );
       });
-      },
-    );
+    };
 
-    const ret = ({
+    return memoize(
+      ({
         zoom,
         offsetLeft,
         offsetTop,
@@ -85,6 +82,9 @@ export class Renderer {
         width,
         editingElement,
         pendingImageElementId,
+        // unused but serves we cache on it to invalidate elements if they
+        // get mutated
+        versionNonce: _versionNonce,
       }: {
         zoom: AppState["zoom"];
         offsetLeft: AppState["offsetLeft"];
@@ -95,6 +95,7 @@ export class Renderer {
         width: AppState["width"];
         editingElement: AppState["editingElement"];
         pendingImageElementId: AppState["pendingImageElementId"];
+        versionNonce: ReturnType<InstanceType<typeof Scene>["getVersionNonce"]>;
       }) => {
         const elements = this.scene.getNonDeletedElements();
 
@@ -116,14 +117,8 @@ export class Renderer {
         });
 
         return { canvasElements, visibleElements };
-    };
-
-    ret.clear = () => {
-      getVisibleCanvasElements.clear();
-      getCanvasElements.clear();
-    };
-
-    return ret;
+      },
+    );
   })();
 
   public destroy() {