stackblitz / tutorialkit

TutorialKit by StackBlitz - Create interactive tutorials powered by the WebContainer API
https://tutorialkit.dev
MIT License
232 stars 22 forks source link

fix(astro): don't modify state during re-renders of `<WorkspacePanelWrapper />` #240

Closed AriPerkkio closed 1 month ago

AriPerkkio commented 1 month ago

Fixes React's state warning that happen when navigating between pages. setLesson that's done inside rendering block attempts to update state of the components that are just about to unmount.

Warning: Cannot update a component (`PreviewPanel`) while rendering a different component (`WorkspacePanelWrapper`). To locate the bad setState() call inside `WorkspacePanelWrapper`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
    at WorkspacePanelWrapper (http://localhost:4321/@fs/Users/x/tutorialkit/packages/astro/dist/default/components/WorkspacePanelWrapper.tsx:23:41)

printWarning                        @    react-dom.development.js:86
error                               @    react-dom.development.js:60
warnAboutRenderPhaseUpdatesInDEV    @    react-dom.development.js:27531
scheduleUpdateOnFiber               @    react-dom.development.js:25537
forceStoreRerender                  @    react-dom.development.js:16158
handleStoreChange                   @    react-dom.development.js:16134
notify                              @    index.js:55
set                                 @    index.js:72
setPreviews                         @    previews.js:77
setLesson                           @    index.js:96
WorkspacePanelWrapper               @    WorkspacePanelWrapper.tsx:15
stackblitz[bot] commented 1 month ago

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.