From 081c68b01a04d4182a5ea229a88518ad91a036c6 Mon Sep 17 00:00:00 2001
From: Ashok Kumar M <35134347+marks0351@users.noreply.github.com>
Date: Wed, 27 Sep 2023 00:14:19 +0530
Subject: [PATCH] fix: memoize LayoutSystemBasedCanvas

---
 app/client/src/layoutSystems/CanvasFactory.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/app/client/src/layoutSystems/CanvasFactory.tsx b/app/client/src/layoutSystems/CanvasFactory.tsx
index ddbf2288ef3..802cca07ae7 100644
--- a/app/client/src/layoutSystems/CanvasFactory.tsx
+++ b/app/client/src/layoutSystems/CanvasFactory.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { memo, useMemo } from "react";
 import { useSelector } from "react-redux";
 import {
   getAppPositioningType,
@@ -15,7 +15,8 @@ import { getLayoutSystem } from "./withLayoutSystemWidgetHOC";
  * Canvas also provides editing layout system specific editing experiences like Drag and Drop, Drag to Select, Widget Grouping, etc.
  * This Component Hydrates canvas with enhanced properties from withWidgetProps and picks the layout system specific Canvas Implementation.
  */
-const LayoutSystemBasedCanvas = withWidgetProps(((props: WidgetProps) => {
+
+const LayoutSystemBasedCanvas = memo((props: WidgetProps) => {
   const renderMode = useSelector(getRenderMode);
   const appPositioningType = useSelector(getAppPositioningType);
   const { canvasSystem } = useMemo(
@@ -29,8 +30,12 @@ const LayoutSystemBasedCanvas = withWidgetProps(((props: WidgetProps) => {
   );
   const { Canvas, propertyEnhancer } = canvasSystem;
   return <Canvas {...propertyEnhancer(props)} />;
-}) as any);
+});
+
+const HydratedLayoutSystemBasedCanvas = withWidgetProps(
+  LayoutSystemBasedCanvas as any,
+);
 
 export const renderAppsmithCanvas = (props: WidgetProps) => {
-  return <LayoutSystemBasedCanvas {...props} />;
+  return <HydratedLayoutSystemBasedCanvas {...props} />;
 };