Fully switch ReactDOM to v18 mode

httptoolkit · Mar 27, 2024 · 6c9efea · 6c9efea
1 parent 37f8f0b
commit 6c9efea
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 6 deletions.
diff --git a/src/index.tsx b/src/index.tsx
@@ -12,7 +12,7 @@ initSentry(process.env.SENTRY_DSN);
 
 import * as _ from 'lodash';
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom/client';
 import * as mobx from 'mobx';
 import { Provider } from 'mobx-react';
 
@@ -108,7 +108,8 @@ appStartupPromise.then(() => {
     console.log('App started, rendering');
 
     document.dispatchEvent(new Event('load:rendering'));
-    ReactDOM.render(
+    const root = ReactDOM.createRoot(document.querySelector(APP_ELEMENT_SELECTOR)!);
+    root.render(
         <Provider {...stores}>
             <StyleProvider>
                 <ErrorBoundary>
@@ -117,7 +118,7 @@ appStartupPromise.then(() => {
                 </ErrorBoundary>
             </StyleProvider>
         </Provider>
-    , document.querySelector(APP_ELEMENT_SELECTOR))
+    );
 });
 
 const STARTUP_TIMEOUT = 10000;

diff --git a/src/util/ui.ts b/src/util/ui.ts
@@ -165,8 +165,6 @@ export function useSize(ref: React.RefObject<HTMLElement>, defaultValue: number)
 
             if (container) {
                 setSpaceAvailable(container.clientWidth);
-            } else {
-                logError("Element resized, but no ref available");
             }
         });
 
@@ -177,7 +175,7 @@ export function useSize(ref: React.RefObject<HTMLElement>, defaultValue: number)
         }
 
         return () => resizeObserver.disconnect();
-    }, []);
+    }, [ref]);
 
     return spaceAvailable;
 }