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; }