diff --git a/packages/dockview/src/react/dockview/dockview.tsx b/packages/dockview/src/react/dockview/dockview.tsx
index a54993ec8..38f7726e3 100644
--- a/packages/dockview/src/react/dockview/dockview.tsx
+++ b/packages/dockview/src/react/dockview/dockview.tsx
@@ -53,13 +53,13 @@ export interface IDockviewReactProps {
 export const DockviewReact = React.forwardRef(
     (props: IDockviewReactProps, ref: React.ForwardedRef<HTMLDivElement>) => {
         const domRef = React.useRef<HTMLDivElement>(null);
-        const [dockview, setDockview] = React.useState<DockviewComponent>();
+        const dockviewRef = React.useRef<DockviewComponent>();
         const [portals, addPortal] = usePortalsLifecycle();
 
         React.useImperativeHandle(ref, () => domRef.current!, []);
 
         React.useEffect(() => {
-            if (props.disableAutoResizing || !dockview) {
+            if (props.disableAutoResizing) {
                 return () => {
                     //
                 };
@@ -67,13 +67,13 @@ export const DockviewReact = React.forwardRef(
 
             const watcher = watchElementResize(domRef.current!, (entry) => {
                 const { width, height } = entry.contentRect;
-                dockview.layout(width, height);
+                dockviewRef.current?.layout(width, height);
             });
 
             return () => {
                 watcher.dispose();
             };
-        }, [dockview, props.disableAutoResizing]);
+        }, [props.disableAutoResizing]);
 
         React.useEffect(() => {
             const factory: GroupPanelFrameworkComponentFactory = {
@@ -122,7 +122,7 @@ export const DockviewReact = React.forwardRef(
 
             const element = document.createElement('div');
 
-            const component = new DockviewComponent(element, {
+            const dockview = new DockviewComponent(element, {
                 frameworkComponentFactory: factory,
                 frameworkComponents: props.components,
                 frameworkTabComponents: props.tabComponents,
@@ -134,68 +134,75 @@ export const DockviewReact = React.forwardRef(
                     : undefined,
             });
 
-            domRef.current!.appendChild(component.element);
-            component.deserializer = new ReactPanelDeserialzier(component);
+            const disposable = dockview.onDidDrop((event) => {
+                if (props.onDidDrop) {
+                    props.onDidDrop(event);
+                }
+            });
+
+            domRef.current?.appendChild(dockview.element);
+            dockview.deserializer = new ReactPanelDeserialzier(dockview);
 
             const { clientWidth, clientHeight } = domRef.current!;
-            component.layout(clientWidth, clientHeight);
+            dockview.layout(clientWidth, clientHeight);
 
             if (props.onReady) {
-                props.onReady({ api: new DockviewApi(component) });
+                props.onReady({ api: new DockviewApi(dockview) });
             }
 
-            setDockview(component);
+            dockviewRef.current = dockview;
 
             return () => {
-                component.dispose();
+                disposable.dispose();
+                dockview.dispose();
                 element.remove();
             };
         }, []);
 
         React.useEffect(() => {
-            if (!dockview) {
+            if (!dockviewRef.current) {
                 return;
             }
-            dockview.updateOptions({
+            dockviewRef.current.updateOptions({
                 frameworkComponents: props.components,
             });
-        }, [dockview, props.components]);
+        }, [props.components]);
 
         React.useEffect(() => {
-            if (!dockview) {
+            if (!dockviewRef.current) {
                 return;
             }
-            dockview.updateOptions({
+            dockviewRef.current.updateOptions({
                 watermarkFrameworkComponent: props.watermarkComponent,
             });
-        }, [dockview, props.watermarkComponent]);
+        }, [props.watermarkComponent]);
 
         React.useEffect(() => {
-            if (!dockview) {
+            if (!dockviewRef.current) {
                 return;
             }
-            dockview.updateOptions({
+            dockviewRef.current.updateOptions({
                 showDndOverlay: props.showDndOverlay,
             });
-        }, [dockview, props.showDndOverlay]);
+        }, [props.showDndOverlay]);
 
         React.useEffect(() => {
-            if (!dockview) {
+            if (!dockviewRef.current) {
                 return;
             }
-            dockview.updateOptions({
+            dockviewRef.current.updateOptions({
                 frameworkTabComponents: props.tabComponents,
             });
-        }, [dockview, props.tabComponents]);
+        }, [props.tabComponents]);
 
         React.useEffect(() => {
-            if (!props.onTabContextMenu || !dockview) {
+            if (!props.onTabContextMenu || !dockviewRef.current) {
                 return () => {
                     //noop
                 };
             }
 
-            const disposable = dockview.onTabContextMenu((event) => {
+            const disposable = dockviewRef.current.onTabContextMenu((event) => {
                 if (props.onTabContextMenu) {
                     props.onTabContextMenu(event);
                 }
@@ -204,25 +211,7 @@ export const DockviewReact = React.forwardRef(
             return () => {
                 disposable.dispose();
             };
-        }, [dockview, props.onTabContextMenu]);
-
-        React.useEffect(() => {
-            if (!dockview) {
-                return () => {
-                    //
-                };
-            }
-
-            const disposable = dockview.onDidDrop((event) => {
-                if (props.onDidDrop) {
-                    props.onDidDrop(event);
-                }
-            });
-
-            return () => {
-                disposable.dispose();
-            };
-        }, [dockview, props.onDidDrop]);
+        }, [props.onTabContextMenu]);
 
         return (
             <div
diff --git a/packages/dockview/src/react/gridview/gridview.tsx b/packages/dockview/src/react/gridview/gridview.tsx
index e4b8cce2b..65860da3c 100644
--- a/packages/dockview/src/react/gridview/gridview.tsx
+++ b/packages/dockview/src/react/gridview/gridview.tsx
@@ -34,13 +34,13 @@ export interface IGridviewReactProps {
 export const GridviewReact = React.forwardRef(
     (props: IGridviewReactProps, ref: React.ForwardedRef<HTMLDivElement>) => {
         const domRef = React.useRef<HTMLDivElement>(null);
-        const [gridview, setGridview] = React.useState<IGridviewComponent>();
+        const gridviewRef = React.useRef<IGridviewComponent>();
         const [portals, addPortal] = usePortalsLifecycle();
 
         React.useImperativeHandle(ref, () => domRef.current!, []);
 
         React.useEffect(() => {
-            if (props.disableAutoResizing || !gridview) {
+            if (props.disableAutoResizing) {
                 return () => {
                     //
                 };
@@ -48,18 +48,18 @@ export const GridviewReact = React.forwardRef(
 
             const watcher = watchElementResize(domRef.current!, (entry) => {
                 const { width, height } = entry.contentRect;
-                gridview.layout(width, height);
+                gridviewRef.current?.layout(width, height);
             });
 
             return () => {
                 watcher.dispose();
             };
-        }, [gridview, props.disableAutoResizing]);
+        }, [props.disableAutoResizing]);
 
         React.useEffect(() => {
             const element = document.createElement('div');
 
-            const component = new GridviewComponent(element, {
+            const gridview = new GridviewComponent(element, {
                 proportionalLayout:
                     typeof props.proportionalLayout === 'boolean'
                         ? props.proportionalLayout
@@ -83,31 +83,31 @@ export const GridviewReact = React.forwardRef(
                     : undefined,
             });
 
-            domRef.current!.appendChild(component.element);
+            domRef.current?.appendChild(gridview.element);
 
             const { clientWidth, clientHeight } = domRef.current!;
-            component.layout(clientWidth, clientHeight);
+            gridview.layout(clientWidth, clientHeight);
 
             if (props.onReady) {
-                props.onReady({ api: new GridviewApi(component) });
+                props.onReady({ api: new GridviewApi(gridview) });
             }
 
-            setGridview(component);
+            gridviewRef.current = gridview;
 
             return () => {
-                component.dispose();
+                gridview.dispose();
                 element.remove();
             };
         }, []);
 
         React.useEffect(() => {
-            if (!gridview) {
+            if (!gridviewRef.current) {
                 return;
             }
-            gridview.updateOptions({
+            gridviewRef.current.updateOptions({
                 frameworkComponents: props.components,
             });
-        }, [gridview, props.components]);
+        }, [props.components]);
 
         return (
             <div
diff --git a/packages/dockview/src/react/paneview/paneview.tsx b/packages/dockview/src/react/paneview/paneview.tsx
index 1f559b8c1..80dcdcd44 100644
--- a/packages/dockview/src/react/paneview/paneview.tsx
+++ b/packages/dockview/src/react/paneview/paneview.tsx
@@ -39,13 +39,13 @@ export interface IPaneviewReactProps {
 export const PaneviewReact = React.forwardRef(
     (props: IPaneviewReactProps, ref: React.ForwardedRef<HTMLDivElement>) => {
         const domRef = React.useRef<HTMLDivElement>(null);
-        const [paneview, setPaneview] = React.useState<IPaneviewComponent>();
+        const paneviewRef = React.useRef<IPaneviewComponent>();
         const [portals, addPortal] = usePortalsLifecycle();
 
         React.useImperativeHandle(ref, () => domRef.current!, []);
 
         React.useEffect(() => {
-            if (props.disableAutoResizing || !paneview) {
+            if (props.disableAutoResizing) {
                 return () => {
                     //
                 };
@@ -53,13 +53,13 @@ export const PaneviewReact = React.forwardRef(
 
             const watcher = watchElementResize(domRef.current!, (entry) => {
                 const { width, height } = entry.contentRect;
-                paneview.layout(width, height);
+                paneviewRef.current?.layout(width, height);
             });
 
             return () => {
                 watcher.dispose();
             };
-        }, [paneview, props.disableAutoResizing]);
+        }, [props.disableAutoResizing]);
 
         React.useEffect(() => {
             const createComponent = (
@@ -71,7 +71,7 @@ export const PaneviewReact = React.forwardRef(
                     addPortal,
                 });
 
-            const component = new PaneviewComponent(domRef.current!, {
+            const paneview = new PaneviewComponent(domRef.current!, {
                 frameworkComponents: props.components,
                 components: {},
                 headerComponents: {},
@@ -87,47 +87,49 @@ export const PaneviewReact = React.forwardRef(
                 },
             });
 
-            const api = new PaneviewApi(component);
+            const api = new PaneviewApi(paneview);
 
             const { clientWidth, clientHeight } = domRef.current!;
-            component.layout(clientWidth, clientHeight);
+            paneview.layout(clientWidth, clientHeight);
 
             if (props.onReady) {
                 props.onReady({ api });
             }
 
-            setPaneview(component);
+            paneviewRef.current = paneview;
 
             return () => {
-                component.dispose();
+                paneview.dispose();
             };
         }, []);
 
         React.useEffect(() => {
-            if (!paneview) {
+            if (!paneviewRef.current) {
                 return;
             }
-            paneview.updateOptions({
+            paneviewRef.current.updateOptions({
                 frameworkComponents: props.components,
             });
-        }, [paneview, props.components]);
+        }, [props.components]);
 
         React.useEffect(() => {
-            if (!paneview) {
+            if (!paneviewRef.current) {
                 return;
             }
-            paneview.updateOptions({
+            paneviewRef.current.updateOptions({
                 headerframeworkComponents: props.headerComponents,
             });
-        }, [paneview, props.headerComponents]);
+        }, [props.headerComponents]);
 
         React.useEffect(() => {
-            if (!paneview) {
+            if (!paneviewRef.current) {
                 return () => {
                     //
                 };
             }
 
+            const paneview = paneviewRef.current;
+
             const disposable = paneview.onDidDrop((event) => {
                 if (props.onDidDrop) {
                     props.onDidDrop({
@@ -140,7 +142,7 @@ export const PaneviewReact = React.forwardRef(
             return () => {
                 disposable.dispose();
             };
-        }, [paneview, props.onDidDrop]);
+        }, [props.onDidDrop]);
 
         return (
             <div
diff --git a/packages/dockview/src/react/splitview/splitview.tsx b/packages/dockview/src/react/splitview/splitview.tsx
index df516acce..bda1de124 100644
--- a/packages/dockview/src/react/splitview/splitview.tsx
+++ b/packages/dockview/src/react/splitview/splitview.tsx
@@ -34,13 +34,13 @@ export interface ISplitviewReactProps {
 export const SplitviewReact = React.forwardRef(
     (props: ISplitviewReactProps, ref: React.ForwardedRef<HTMLDivElement>) => {
         const domRef = React.useRef<HTMLDivElement>(null);
-        const [splitview, setSplitview] = React.useState<ISplitviewComponent>();
+        const splitviewRef = React.useRef<ISplitviewComponent>();
         const [portals, addPortal] = usePortalsLifecycle();
 
         React.useImperativeHandle(ref, () => domRef.current!, []);
 
         React.useEffect(() => {
-            if (props.disableAutoResizing || !splitview) {
+            if (props.disableAutoResizing) {
                 return () => {
                     //
                 };
@@ -48,16 +48,16 @@ export const SplitviewReact = React.forwardRef(
 
             const watcher = watchElementResize(domRef.current!, (entry) => {
                 const { width, height } = entry.contentRect;
-                splitview.layout(width, height);
+                splitviewRef.current?.layout(width, height);
             });
 
             return () => {
                 watcher.dispose();
             };
-        }, [splitview, props.disableAutoResizing]);
+        }, [props.disableAutoResizing]);
 
         React.useEffect(() => {
-            const component = new SplitviewComponent(domRef.current!, {
+            const splitview = new SplitviewComponent(domRef.current!, {
                 orientation: props.orientation,
                 frameworkComponents: props.components,
                 frameworkWrapper: {
@@ -81,27 +81,27 @@ export const SplitviewReact = React.forwardRef(
             });
 
             const { clientWidth, clientHeight } = domRef.current!;
-            component.layout(clientWidth, clientHeight);
+            splitview.layout(clientWidth, clientHeight);
 
             if (props.onReady) {
-                props.onReady({ api: new SplitviewApi(component) });
+                props.onReady({ api: new SplitviewApi(splitview) });
             }
 
-            setSplitview(component);
+            splitviewRef.current = splitview;
 
             return () => {
-                component.dispose();
+                splitview.dispose();
             };
         }, []);
 
         React.useEffect(() => {
-            if (!splitview) {
+            if (!splitviewRef.current) {
                 return;
             }
-            splitview.updateOptions({
+            splitviewRef.current.updateOptions({
                 frameworkComponents: props.components,
             });
-        }, [splitview, props.components]);
+        }, [props.components]);
 
         return (
             <div