fix(astro): don't modify state during re-renders of `<WorkspacePanelW…

…rapper />` (#240)
stackblitz · Aug 13, 2024 · 745be37 · 745be37
1 parent 9bf2156
commit 745be37
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 1 deletion.
diff --git a/packages/astro/src/default/components/WorkspacePanelWrapper.tsx b/packages/astro/src/default/components/WorkspacePanelWrapper.tsx
@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { useStore } from '@nanostores/react';
 import { WorkspacePanel } from '@tutorialkit/components-react';
 import type { Lesson } from '@tutorialkit/types';
@@ -11,7 +12,13 @@ interface Props {
 export function WorkspacePanelWrapper({ lesson }: Props) {
   const theme = useStore(themeStore);
 
-  tutorialStore.setLesson(lesson, { ssr: import.meta.env.SSR });
+  useEffect(() => {
+    tutorialStore.setLesson(lesson);
+  }, [lesson]);
+
+  if (import.meta.env.SSR || !tutorialStore.lesson) {
+    tutorialStore.setLesson(lesson, { ssr: import.meta.env.SSR });
+  }
 
   return <WorkspacePanel tutorialStore={tutorialStore} theme={theme} />;
 }
diff --git a/packages/components/react/src/Panels/PreviewPanel.tsx b/packages/components/react/src/Panels/PreviewPanel.tsx
@@ -134,6 +134,7 @@ export const PreviewPanel = memo(
     return createElement(PanelGroup, { id: 'preview-panel', direction: 'horizontal' }, ...children);
   }),
 );
+PreviewPanel.displayName = 'PreviewPanel';
 
 interface PreviewProps {
   iframe: IFrameRef;

diff --git a/packages/components/react/src/core/Terminal/index.tsx b/packages/components/react/src/core/Terminal/index.tsx
@@ -83,4 +83,5 @@ export const Terminal = forwardRef<TerminalRef, TerminalProps>(
   },
 );
 
+Terminal.displayName = 'Terminal';
 export default Terminal;