From 090a5ae2888666c5c05c1568c657bfed0e4a2255 Mon Sep 17 00:00:00 2001
From: ctnicholas <ctnicholasdev@gmail.com>
Date: Sun, 2 Oct 2022 13:02:41 +0000
Subject: [PATCH 1/2] fix: style prop no longer passed to React.Fragment

---
 sandpack-react/src/presets/Sandpack.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/sandpack-react/src/presets/Sandpack.tsx b/sandpack-react/src/presets/Sandpack.tsx
index 26c788ea8..d048de554 100644
--- a/sandpack-react/src/presets/Sandpack.tsx
+++ b/sandpack-react/src/presets/Sandpack.tsx
@@ -82,7 +82,6 @@ export const Sandpack: SandpackInternal = (props) => {
 
   const hasRightColumn =
     props.options?.showConsole || props.options?.showConsoleButton;
-  const RightColumn = hasRightColumn ? SandpackStack : React.Fragment;
 
   const rightColumnStyle = {
     flexGrow: previewPart,
@@ -93,6 +92,13 @@ 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>
+    );
+
   /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
   const templateFiles = SANDBOX_TEMPLATES[props.template!] ?? {};
   const mode = "mode" in templateFiles ? templateFiles.mode : "preview";
@@ -128,7 +134,7 @@ export const Sandpack: SandpackInternal = (props) => {
         />
 
         {/* @ts-ignore */}
-        <RightColumn style={rightColumnStyle}>
+        <RightColumn>
           {mode === "preview" && (
             <SandpackPreview
               actionsChildren={actionsChildren}

From c9418a1192a176a3712afe7dc0ab58808bdf5da5 Mon Sep 17 00:00:00 2001
From: ctnicholas <ctnicholasdev@gmail.com>
Date: Tue, 4 Oct 2022 13:36:58 +0000
Subject: [PATCH 2/2] fix: Better performance

---
 sandpack-react/src/presets/Sandpack.tsx | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/sandpack-react/src/presets/Sandpack.tsx b/sandpack-react/src/presets/Sandpack.tsx
index d048de554..8aad01872 100644
--- 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}