fix: the bug report reloads on every key press

lib/components/CircuitJsonPreview/CircuitJsonPreview.tsx

@@ -48,7 +48,7 @@ import type { CircuitJsonError } from "circuit-json"
 import { version } from "../../../package.json"
 import type { Object3D } from "three"
 import { useEvalVersions } from "lib/hooks/use-eval-versions"
-import { FileMenuLeftHeader } from "../FileMenuLeftHeader"
+import { FileMenuLeftHeaderWithBugReport } from "../FileMenuLeftHeaderWithBugReport"
 
 declare global {
   interface Window {
@@ -213,7 +213,7 @@ export const CircuitJsonPreview = ({
           >
             {leftHeaderContent}
             {showFileMenu && !leftHeaderContent && (
-              <FileMenuLeftHeader
+              <FileMenuLeftHeaderWithBugReport
                 isWebEmbedded={isWebEmbedded}
                 circuitJson={circuitJson}
                 projectName={projectName}

lib/components/FileMenuLeftHeader.tsx

@@ -38,14 +38,14 @@ import { toast } from "lib/utils/toast"
 import { Toaster } from "react-hot-toast"
 import { useOrderDialogCli } from "./OrderDialog/useOrderDialog"
 import packageJson from "../../package.json"
-import { useBugReportDialog } from "./useBugReportDialog"
 
 export const FileMenuLeftHeader = (props: {
   isWebEmbedded?: boolean
   shouldLoadLatestEval?: boolean
   onChangeShouldLoadLatestEval?: (shouldLoadLatestEval: boolean) => void
   circuitJson?: any
   projectName?: string
+  openBugReportDialog?: () => void
 }) => {
   const lastRunEvalVersion = useRunnerStore((s) => s.lastRunEvalVersion)
   const currentMainComponentPath = useRunFrameStore(
@@ -156,8 +156,6 @@ export const FileMenuLeftHeader = (props: {
   const [isImportDialogOpen, setIsImportDialogOpen] = useState(false)
   const [isAiReviewDialogOpen, setIsAiReviewDialogOpen] = useState(false)
 
-  const { BugReportDialog, openBugReportDialog } = useBugReportDialog()
-
   return (
     <>
       <DropdownMenu>
@@ -213,11 +211,11 @@ export const FileMenuLeftHeader = (props: {
             </>
           )}
 
-          {!props.isWebEmbedded && (
+          {!props.isWebEmbedded && props.openBugReportDialog && (
             <DropdownMenuItem
               className="rf-text-xs"
               onSelect={() => {
-                openBugReportDialog()
+                props.openBugReportDialog?.()
               }}
             >
               Report Bug
@@ -356,7 +354,6 @@ export const FileMenuLeftHeader = (props: {
           isOpen={isSelectSnippetDialogOpen}
         />
       </DropdownMenu>
-      <BugReportDialog />
       <ImportComponentDialogForCli
         isOpen={isImportDialogOpen}
         onClose={() => setIsImportDialogOpen(false)}

lib/components/FileMenuLeftHeaderWithBugReport.tsx

@@ -0,0 +1,31 @@
+import { memo } from "react"
+import { FileMenuLeftHeader } from "./FileMenuLeftHeader"
+import { useBugReportDialog } from "./useBugReportDialog"
+
+/**
+ * Wrapper component that manages bug report dialog state separately
+ * from FileMenuLeftHeader to prevent unnecessary re-renders
+ */
+const FileMenuLeftHeaderWithBugReportComponent = (props: {
+  isWebEmbedded?: boolean
+  shouldLoadLatestEval?: boolean
+  onChangeShouldLoadLatestEval?: (shouldLoadLatestEval: boolean) => void
+  circuitJson?: any
+  projectName?: string
+}) => {
+  const { BugReportDialog, openBugReportDialog } = useBugReportDialog()
+
+  return (
+    <>
+      <FileMenuLeftHeader
+        {...props}
+        openBugReportDialog={openBugReportDialog}
+      />
+      {BugReportDialog}
+    </>
+  )
+}
+
+export const FileMenuLeftHeaderWithBugReport = memo(
+  FileMenuLeftHeaderWithBugReportComponent,
+)

lib/components/RunFrame/RunFrame.tsx

@@ -32,7 +32,7 @@ import { useRunnerStore } from "./runner-store/use-runner-store"
 import { useMutex } from "./useMutex"
 import type { ManualEditEvent } from "@tscircuit/props"
 import { registryKy } from "../../utils/get-registry-ky"
-import { FileMenuLeftHeader } from "../FileMenuLeftHeader"
+import { FileMenuLeftHeaderWithBugReport } from "../FileMenuLeftHeaderWithBugReport"
 import { LoadingSkeleton } from "../ui/LoadingSkeleton"
 import { useStyles } from "../../hooks/use-styles"
 import { API_BASE } from "../RunFrameWithApi/api-base"
@@ -585,7 +585,9 @@ export const RunFrame = (props: RunFrameProps) => {
             </div>
           )}
           {props.showFileMenu !== false && (
-            <FileMenuLeftHeader isWebEmbedded={props.isWebEmbedded} />
+            <FileMenuLeftHeaderWithBugReport
+              isWebEmbedded={props.isWebEmbedded}
+            />
           )}
           {props.leftHeaderContent}
         </>

lib/components/RunFrameForCli/RunFrameForCli.tsx

@@ -1,7 +1,7 @@
 import { useLocalStorageState } from "lib/hooks/use-local-storage-state"
 import { useCallback, useState } from "react"
 import { RunFrameWithApi } from "../RunFrameWithApi/RunFrameWithApi"
-import { FileMenuLeftHeader } from "../FileMenuLeftHeader"
+import { FileMenuLeftHeaderWithBugReport } from "../FileMenuLeftHeaderWithBugReport"
 
 export const RunFrameForCli = (props: {
   debug?: boolean
@@ -45,7 +45,7 @@ export const RunFrameForCli = (props: {
       onMainComponentPathChange={updateMainComponentHash}
       leftHeaderContent={
         <div className="rf-flex rf-items-center rf-justify-between">
-          <FileMenuLeftHeader
+          <FileMenuLeftHeaderWithBugReport
             isWebEmbedded={false}
             shouldLoadLatestEval={!props.workerBlobUrl && shouldLoadLatestEval}
             onChangeShouldLoadLatestEval={(newShouldLoadLatestEval) => {

lib/components/useBugReportDialog.tsx

@@ -28,7 +28,7 @@ declare global {
 }
 
 type UseBugReportDialogResult = {
-  BugReportDialog: () => ReactElement
+  BugReportDialog: ReactElement
   openBugReportDialog: () => void
 }
 
@@ -208,11 +208,12 @@ export const useBugReportDialog = (): UseBugReportDialogResult => {
     } finally {
       setIsSubmitting(false)
     }
-  }, [userText])
+  }, [])
 
-  const BugReportDialog = useCallback(() => {
+  const BugReportDialog = useMemo(() => {
     return (
       <AlertDialog
+        key="bug-report-dialog"
         open={isOpen}
         onOpenChange={(open) => {
           if (!open) {
@@ -278,6 +279,7 @@ export const useBugReportDialog = (): UseBugReportDialogResult => {
                       Description (optional)
                     </label>
                     <textarea
+                      key="bug-description-textarea"
                       id="bug-description"
                       className="rf-w-full rf-min-h-[100px] rf-px-3 rf-py-2 rf-text-sm rf-border rf-border-gray-300 rf-rounded-md focus:rf-outline-none focus:rf-ring-2 focus:rf-ring-blue-500"
                       placeholder="Describe the issue you're experiencing..."
@@ -357,15 +359,15 @@ export const useBugReportDialog = (): UseBugReportDialogResult => {
       </AlertDialog>
     )
   }, [
-    bugReportFileCount,
-    closeBugReportDialog,
-    errorMessage,
-    handleConfirmBugReport,
     isOpen,
-    isSessionLoggedIn,
     isSubmitting,
+    closeBugReportDialog,
+    errorMessage,
     successState,
+    bugReportFileCount,
     userText,
+    isSessionLoggedIn,
+    handleConfirmBugReport,
   ])
 
   return {