diff --git a/app/client/src/pages/Editor/IDE/EditorPane/components/Pages.tsx b/app/client/src/pages/Editor/IDE/EditorPane/components/Pages.tsx
new file mode 100644
index 0000000000..07eb8de8af
--- /dev/null
+++ b/app/client/src/pages/Editor/IDE/EditorPane/components/Pages.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import { useSelector } from "react-redux";
+
+import { default as OldPages } from "pages/Editor/Explorer/Pages";
+import { PagesSection } from "../PagesSection";
+import {
+  getIsSideBySideEnabled,
+  getPagesActiveStatus,
+} from "selectors/ideSelectors";
+
+const Pages = () => {
+  const isSideBySideEnabled = useSelector(getIsSideBySideEnabled);
+  const pagesActive = useSelector(getPagesActiveStatus);
+
+  if (!isSideBySideEnabled) {
+    return <OldPages />;
+    /* divider is inside the Pages component */
+  } else if (isSideBySideEnabled && pagesActive) {
+    return <PagesSection />;
+  } else {
+    return null;
+  }
+};
+
+export { Pages };
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/index.tsx b/app/client/src/pages/Editor/IDE/EditorPane/index.tsx
index 559c61fe7b..6e5562637d 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/index.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/index.tsx
@@ -4,35 +4,19 @@ import type { RouteComponentProps } from "react-router";
 import { Switch } from "react-router";
 import { useSelector } from "react-redux";
 
-import Pages from "pages/Editor/Explorer/Pages";
 import { SentryRoute } from "@appsmith/AppRouter";
 import { ADD_PATH } from "constants/routes";
 import EditorPaneSegments from "./EditorPaneSegments";
 import GlobalAdd from "./GlobalAdd";
 import { useEditorPaneWidth } from "../hooks";
-import {
-  getIsSideBySideEnabled,
-  getPagesActiveStatus,
-} from "selectors/ideSelectors";
+import { getPagesActiveStatus } from "selectors/ideSelectors";
 import EntityProperties from "pages/Editor/Explorer/Entity/EntityProperties";
-import { PagesSection } from "./PagesSection";
 import { MinimalSegment } from "./MinimalSegment";
+import { Pages } from "./components/Pages";
 
 const EditorPane = ({ match: { path } }: RouteComponentProps) => {
   const width = useEditorPaneWidth();
   const pagesActive = useSelector(getPagesActiveStatus);
-  const isSideBySideEnabled = useSelector(getIsSideBySideEnabled);
-
-  const PagesRender = () => {
-    if (!isSideBySideEnabled) {
-      return <Pages />;
-      /* divider is inside the Pages component */
-    } else if (isSideBySideEnabled && pagesActive) {
-      return <PagesSection />;
-    } else {
-      return null;
-    }
-  };
 
   return (
     <Flex
@@ -46,7 +30,7 @@ const EditorPane = ({ match: { path } }: RouteComponentProps) => {
       {/** Entity Properties component is needed to render
         the Bindings popover in the context menu. Will be removed eventually **/}
       <EntityProperties />
-      <PagesRender />
+      <Pages />
 
       {pagesActive ? (
         <MinimalSegment />
diff --git a/app/client/src/pages/Editor/IDE/index.tsx b/app/client/src/pages/Editor/IDE/index.tsx
index 6c0954e0ff..31feb1ddd5 100644
--- a/app/client/src/pages/Editor/IDE/index.tsx
+++ b/app/client/src/pages/Editor/IDE/index.tsx
@@ -54,4 +54,4 @@ function IDE() {
 
 IDE.displayName = "AppsmithIDE";
 
-export default IDE;
+export default React.memo(IDE);