fix: Better performance

codesandbox · Oct 4, 2022 · c9418a1 · c9418a1
1 parent 090a5ae
commit c9418a1
Showing 1 changed file with 6 additions and 7 deletions.
diff --git a/sandpack-react/src/presets/Sandpack.tsx b/sandpack-react/src/presets/Sandpack.tsx
@@ -82,6 +82,7 @@ export const Sandpack: SandpackInternal = (props) => {
 
   const hasRightColumn =
     props.options?.showConsole || props.options?.showConsoleButton;
+  const RightColumn = hasRightColumn ? SandpackStack : React.Fragment;
 
   const rightColumnStyle = {
     flexGrow: previewPart,
@@ -92,12 +93,10 @@ export const Sandpack: SandpackInternal = (props) => {
     height: props.options?.editorHeight, // use the original editor height
   };
 
-  const RightColumn: React.FC<{ children: React.ReactNode }> = ({ children }) =>
-    hasRightColumn ? (
-      <SandpackStack style={rightColumnStyle}>{children}</SandpackStack>
-    ) : (
-      <React.Fragment>{children}</React.Fragment>
-    );
+  const rightColumnProps = React.useMemo(
+    () => (hasRightColumn ? { style: rightColumnStyle } : {}),
+    [hasRightColumn]
+  );
 
   /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
   const templateFiles = SANDBOX_TEMPLATES[props.template!] ?? {};
@@ -134,7 +133,7 @@ export const Sandpack: SandpackInternal = (props) => {
         />
 
         {/* @ts-ignore */}
-        <RightColumn>
+        <RightColumn {...rightColumnProps}>
           {mode === "preview" && (
             <SandpackPreview
               actionsChildren={actionsChildren}