Render dialog only if open for efficiency (#726)

int128 · Jun 23, 2024 · 3986c4f · 3986c4f
1 parent 1a01bdd
commit 3986c4f
Showing 1 changed file with 6 additions and 1 deletion.
diff --git a/src/Dialog/component.tsx b/src/Dialog/component.tsx
@@ -19,6 +19,10 @@ const DialogComponent: FC<DialogComponentProps> = ({ children, open, onRequestCl
       dialogRef.current.close()
     }
   }, [open])
+
+  if (!open) {
+    return null
+  }
   return createPortal(
     <dialog
       ref={dialogRef}
@@ -35,7 +39,8 @@ const DialogComponent: FC<DialogComponentProps> = ({ children, open, onRequestCl
     >
       {children}
     </dialog>,
-    // When an element of <dialog> is moved, the style is broken.
+    // If open <dialog> element is moved, the style is broken.
+    // To avoid it, put <dialog> to the top level.
     document.body,
   )
 }