memoised hooks results

appsmithorg · Oct 29, 2024 · 8c09c55 · 8c09c55
1 parent f74f97d
commit 8c09c55
Show file tree

Hide file tree

Showing 2 changed files with 98 additions and 92 deletions.
diff --git a/app/client/src/ce/pages/Editor/IDE/EditorPane/JS/hooks.tsx b/app/client/src/ce/pages/Editor/IDE/EditorPane/JS/hooks.tsx
@@ -1,4 +1,4 @@
-import { lazy, Suspense, useCallback } from "react";
+import { lazy, Suspense, useCallback, useMemo } from "react";
 import React from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { createNewJSCollection } from "actions/jsPaneActions";
@@ -118,36 +118,39 @@ const JSEmpty = lazy(async () =>
 );
 
 export const useJSEditorRoutes = (path: string): UseRoutes => {
-  return [
-    {
-      exact: true,
-      key: "AddJS",
-      component: (args) => (
-        <Suspense fallback={<Skeleton />}>
-          <AddJS {...args} />
-        </Suspense>
-      ),
-      path: [`${path}${ADD_PATH}`, `${path}/:baseCollectionId${ADD_PATH}`],
-    },
-    {
-      exact: true,
-      key: "JSEditor",
-      component: (args) => (
-        <Suspense fallback={<Skeleton />}>
-          <JSEditor {...args} />
-        </Suspense>
-      ),
-      path: [path + "/:baseCollectionId"],
-    },
-    {
-      key: "JSEmpty",
-      component: (args) => (
-        <Suspense fallback={<Skeleton />}>
-          <JSEmpty {...args} />
-        </Suspense>
-      ),
-      exact: true,
-      path: [path],
-    },
-  ];
+  return useMemo(
+    () => [
+      {
+        exact: true,
+        key: "AddJS",
+        component: (args) => (
+          <Suspense fallback={<Skeleton />}>
+            <AddJS {...args} />
+          </Suspense>
+        ),
+        path: [`${path}${ADD_PATH}`, `${path}/:baseCollectionId${ADD_PATH}`],
+      },
+      {
+        exact: true,
+        key: "JSEditor",
+        component: (args) => (
+          <Suspense fallback={<Skeleton />}>
+            <JSEditor {...args} />
+          </Suspense>
+        ),
+        path: [path + "/:baseCollectionId"],
+      },
+      {
+        key: "JSEmpty",
+        component: (args) => (
+          <Suspense fallback={<Skeleton />}>
+            <JSEmpty {...args} />
+          </Suspense>
+        ),
+        exact: true,
+        path: [path],
+      },
+    ],
+    [path],
+  );
 };
diff --git a/app/client/src/ce/pages/Editor/IDE/EditorPane/Query/hooks.tsx b/app/client/src/ce/pages/Editor/IDE/EditorPane/Query/hooks.tsx
@@ -145,72 +145,75 @@ const QueryEmpty = lazy(async () =>
 );
 
 export const useQueryEditorRoutes = (path: string): UseRoutes => {
-  return [
-    {
-      key: "ApiEditor",
-      component: (args) => {
-        return (
-          <Suspense fallback={<Skeleton />}>
-            <ApiEditor {...args} />
-          </Suspense>
-        );
+  return useMemo(
+    () => [
+      {
+        key: "ApiEditor",
+        component: (args) => {
+          return (
+            <Suspense fallback={<Skeleton />}>
+              <ApiEditor {...args} />
+            </Suspense>
+          );
+        },
+        exact: true,
+        path: [
+          BUILDER_PATH + API_EDITOR_ID_PATH,
+          BUILDER_CUSTOM_PATH + API_EDITOR_ID_PATH,
+          BUILDER_PATH_DEPRECATED + API_EDITOR_ID_PATH,
+        ],
       },
-      exact: true,
-      path: [
-        BUILDER_PATH + API_EDITOR_ID_PATH,
-        BUILDER_CUSTOM_PATH + API_EDITOR_ID_PATH,
-        BUILDER_PATH_DEPRECATED + API_EDITOR_ID_PATH,
-      ],
-    },
-    {
-      key: "AddQuery",
-      exact: true,
-      component: (args) => (
-        <Suspense fallback={<Skeleton />}>
-          <AddQuery {...args} />
-        </Suspense>
-      ),
-      path: [`${path}${ADD_PATH}`, `${path}/:baseQueryId${ADD_PATH}`],
-    },
-    {
-      key: "SAASEditor",
-      component: (args) => {
-        return (
+      {
+        key: "AddQuery",
+        exact: true,
+        component: (args) => (
           <Suspense fallback={<Skeleton />}>
-            <QueryEditor {...args} />
+            <AddQuery {...args} />
           </Suspense>
-        );
+        ),
+        path: [`${path}${ADD_PATH}`, `${path}/:baseQueryId${ADD_PATH}`],
       },
-      exact: true,
-      path: [
-        BUILDER_PATH + SAAS_EDITOR_API_ID_PATH,
-        BUILDER_CUSTOM_PATH + SAAS_EDITOR_API_ID_PATH,
-        BUILDER_PATH_DEPRECATED + SAAS_EDITOR_API_ID_PATH,
-      ],
-    },
-    {
-      key: "QueryEditor",
-      component: (args) => {
-        return (
+      {
+        key: "SAASEditor",
+        component: (args) => {
+          return (
+            <Suspense fallback={<Skeleton />}>
+              <QueryEditor {...args} />
+            </Suspense>
+          );
+        },
+        exact: true,
+        path: [
+          BUILDER_PATH + SAAS_EDITOR_API_ID_PATH,
+          BUILDER_CUSTOM_PATH + SAAS_EDITOR_API_ID_PATH,
+          BUILDER_PATH_DEPRECATED + SAAS_EDITOR_API_ID_PATH,
+        ],
+      },
+      {
+        key: "QueryEditor",
+        component: (args) => {
+          return (
+            <Suspense fallback={<Skeleton />}>
+              <QueryEditor {...args} />
+            </Suspense>
+          );
+        },
+        exact: true,
+        path: [path + "/:baseQueryId"],
+      },
+      {
+        key: "QueryEmpty",
+        component: (args) => (
           <Suspense fallback={<Skeleton />}>
-            <QueryEditor {...args} />
+            <QueryEmpty {...args} />
           </Suspense>
-        );
+        ),
+        exact: true,
+        path: [path],
       },
-      exact: true,
-      path: [path + "/:baseQueryId"],
-    },
-    {
-      key: "QueryEmpty",
-      component: (args) => (
-        <Suspense fallback={<Skeleton />}>
-          <QueryEmpty {...args} />
-        </Suspense>
-      ),
-      exact: true,
-      path: [path],
-    },
-  ];
+    ],
+    [path],
+  );
 };
 
 export const useAddQueryListItems = () => {