From 25d460be96a34b26c57d702839618adea7ba5655 Mon Sep 17 00:00:00 2001
From: David Luzar <luzar.david@gmail.com>
Date: Thu, 15 Oct 2020 21:39:24 +0200
Subject: [PATCH] don't touch DOM outside useEffect (#2215)

---
 src/components/Modal.tsx | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index 8a6b4a3cf..611219cab 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -1,6 +1,6 @@
 import "./Modal.scss";
 
-import React, { useEffect, useState } from "react";
+import React, { useState, useLayoutEffect } from "react";
 import { createPortal } from "react-dom";
 import { KEYS } from "../keys";
 
@@ -13,12 +13,17 @@ export const Modal = (props: {
 }) => {
   const modalRoot = useBodyRoot();
 
+  if (!modalRoot) {
+    return null;
+  }
+
   const handleKeydown = (event: React.KeyboardEvent) => {
     if (event.key === KEYS.ESCAPE) {
       event.nativeEvent.stopImmediatePropagation();
       props.onCloseRequest();
     }
   };
+
   return createPortal(
     <div
       className={`Modal ${props.className ?? ""}`}
@@ -46,7 +51,9 @@ export const Modal = (props: {
 };
 
 const useBodyRoot = () => {
-  const createDiv = () => {
+  const [div, setDiv] = useState<HTMLDivElement | null>(null);
+
+  useLayoutEffect(() => {
     const isDarkTheme = !!document
       .querySelector(".excalidraw")
       ?.classList.contains("Appearance_dark");
@@ -59,13 +66,13 @@ const useBodyRoot = () => {
       div.classList.add("Appearance_dark-background-none");
     }
     document.body.appendChild(div);
-    return div;
-  };
-  const [div] = useState(createDiv);
-  useEffect(() => {
+
+    setDiv(div);
+
     return () => {
       document.body.removeChild(div);
     };
-  }, [div]);
+  }, []);
+
   return div;
 };