diff --git a/src/index.tsx b/src/index.tsx
index 9e23cbe6..532b4c81 100644
--- 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(
@@ -117,7 +118,7 @@ appStartupPromise.then(() => {
- , document.querySelector(APP_ELEMENT_SELECTOR))
+ );
});
const STARTUP_TIMEOUT = 10000;
diff --git a/src/util/ui.ts b/src/util/ui.ts
index a77a933f..638ac0d7 100644
--- a/src/util/ui.ts
+++ b/src/util/ui.ts
@@ -165,8 +165,6 @@ export function useSize(ref: React.RefObject, 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, defaultValue: number)
}
return () => resizeObserver.disconnect();
- }, []);
+ }, [ref]);
return spaceAvailable;
}