react-resizable-panels 2.0.21 → 2.0.23

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 2.0.23
+
+- Improve obfuscation for `React.useId` references (#382)
+
+## 2.0.22
+
+- Force eager layout re-calculation after panel added/removed (#375)
+
 ## 2.0.21
 
 - Handle pointer event edge case with different origin iframes (#374)

package/dist/react-resizable-panels.browser.cjs.js

@@ -43,8 +43,8 @@ const {
   useState
 } = React__namespace;
 
-// `toString()` prevents bundlers from trying to `import { useId } from 'react'`
-const useId = React__namespace["useId".toString()];
+// `Math.random()` and `.slice(0, 5)` prevents bundlers from trying to `import { useId } from 'react'`
+const useId = React__namespace[`useId${Math.random()}`.slice(0, 5)];
 const useLayoutEffect_do_not_use_directly = useLayoutEffect;
 
 // The "contextmenu" event is not supported as a PointerEvent in all browsers yet, so MouseEvent still need to be handled
@@ -687,6 +687,11 @@ function updateResizeHandlerStates(action, event) {
   });
 }
 
+function useForceUpdate() {
+  const [_, setCount] = useState(0);
+  return useCallback(() => setCount(prevCount => prevCount + 1), []);
+}
+
 function assert(expectedCondition, message) {
   if (!expectedCondition) {
     console.error(message);
@@ -1596,6 +1601,7 @@ function PanelGroupWithForwardedRef({
   const panelGroupElementRef = useRef(null);
   const [dragState, setDragState] = useState(null);
   const [layout, setLayout] = useState([]);
+  const forceUpdate = useForceUpdate();
   const panelIdToLastNotifiedSizeMapRef = useRef({});
   const panelSizeBeforeCollapseRef = useRef(new Map());
   const prevDeltaRef = useRef(0);
@@ -1858,7 +1864,8 @@ function PanelGroupWithForwardedRef({
       }
     });
     eagerValuesRef.current.panelDataArrayChanged = true;
-  }, []);
+    forceUpdate();
+  }, [forceUpdate]);
 
   // (Re)calculate group layout whenever panels are registered or unregistered.
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -2090,8 +2097,9 @@ function PanelGroupWithForwardedRef({
       // Strict effects mode makes this tricky though because all panels will be registered, unregistered, then re-registered on mount.
       delete panelIdToLastNotifiedSizeMapRef.current[panelData.id];
       eagerValuesRef.current.panelDataArrayChanged = true;
+      forceUpdate();
     }
-  }, []);
+  }, [forceUpdate]);
   const context = useMemo(() => ({
     collapsePanel,
     direction,

package/dist/react-resizable-panels.browser.development.cjs.js

@@ -43,8 +43,8 @@ const {
   useState
 } = React__namespace;
 
-// `toString()` prevents bundlers from trying to `import { useId } from 'react'`
-const useId = React__namespace["useId".toString()];
+// `Math.random()` and `.slice(0, 5)` prevents bundlers from trying to `import { useId } from 'react'`
+const useId = React__namespace[`useId${Math.random()}`.slice(0, 5)];
 const useLayoutEffect_do_not_use_directly = useLayoutEffect;
 
 // The "contextmenu" event is not supported as a PointerEvent in all browsers yet, so MouseEvent still need to be handled
@@ -693,6 +693,11 @@ function updateResizeHandlerStates(action, event) {
   });
 }
 
+function useForceUpdate() {
+  const [_, setCount] = useState(0);
+  return useCallback(() => setCount(prevCount => prevCount + 1), []);
+}
+
 function assert(expectedCondition, message) {
   if (!expectedCondition) {
     console.error(message);
@@ -1660,6 +1665,7 @@ function PanelGroupWithForwardedRef({
   const panelGroupElementRef = useRef(null);
   const [dragState, setDragState] = useState(null);
   const [layout, setLayout] = useState([]);
+  const forceUpdate = useForceUpdate();
   const panelIdToLastNotifiedSizeMapRef = useRef({});
   const panelSizeBeforeCollapseRef = useRef(new Map());
   const prevDeltaRef = useRef(0);
@@ -1964,7 +1970,8 @@ function PanelGroupWithForwardedRef({
       }
     });
     eagerValuesRef.current.panelDataArrayChanged = true;
-  }, []);
+    forceUpdate();
+  }, [forceUpdate]);
 
   // (Re)calculate group layout whenever panels are registered or unregistered.
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -2196,8 +2203,9 @@ function PanelGroupWithForwardedRef({
       // Strict effects mode makes this tricky though because all panels will be registered, unregistered, then re-registered on mount.
       delete panelIdToLastNotifiedSizeMapRef.current[panelData.id];
       eagerValuesRef.current.panelDataArrayChanged = true;
+      forceUpdate();
     }
-  }, []);
+  }, [forceUpdate]);
   const context = useMemo(() => ({
     collapsePanel,
     direction,

package/dist/react-resizable-panels.browser.development.esm.js

@@ -19,8 +19,8 @@ const {
   useState
 } = React;
 
-// `toString()` prevents bundlers from trying to `import { useId } from 'react'`
-const useId = React["useId".toString()];
+// `Math.random()` and `.slice(0, 5)` prevents bundlers from trying to `import { useId } from 'react'`
+const useId = React[`useId${Math.random()}`.slice(0, 5)];
 const useLayoutEffect_do_not_use_directly = useLayoutEffect;
 
 // The "contextmenu" event is not supported as a PointerEvent in all browsers yet, so MouseEvent still need to be handled
@@ -669,6 +669,11 @@ function updateResizeHandlerStates(action, event) {
   });
 }
 
+function useForceUpdate() {
+  const [_, setCount] = useState(0);
+  return useCallback(() => setCount(prevCount => prevCount + 1), []);
+}
+
 function assert(expectedCondition, message) {
   if (!expectedCondition) {
     console.error(message);
@@ -1636,6 +1641,7 @@ function PanelGroupWithForwardedRef({
   const panelGroupElementRef = useRef(null);
   const [dragState, setDragState] = useState(null);
   const [layout, setLayout] = useState([]);
+  const forceUpdate = useForceUpdate();
   const panelIdToLastNotifiedSizeMapRef = useRef({});
   const panelSizeBeforeCollapseRef = useRef(new Map());
   const prevDeltaRef = useRef(0);
@@ -1940,7 +1946,8 @@ function PanelGroupWithForwardedRef({
       }
     });
     eagerValuesRef.current.panelDataArrayChanged = true;
-  }, []);
+    forceUpdate();
+  }, [forceUpdate]);
 
   // (Re)calculate group layout whenever panels are registered or unregistered.
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -2172,8 +2179,9 @@ function PanelGroupWithForwardedRef({
       // Strict effects mode makes this tricky though because all panels will be registered, unregistered, then re-registered on mount.
       delete panelIdToLastNotifiedSizeMapRef.current[panelData.id];
       eagerValuesRef.current.panelDataArrayChanged = true;
+      forceUpdate();
     }
-  }, []);
+  }, [forceUpdate]);
   const context = useMemo(() => ({
     collapsePanel,
     direction,

package/dist/react-resizable-panels.browser.esm.js

@@ -19,8 +19,8 @@ const {
   useState
 } = React;
 
-// `toString()` prevents bundlers from trying to `import { useId } from 'react'`
-const useId = React["useId".toString()];
+// `Math.random()` and `.slice(0, 5)` prevents bundlers from trying to `import { useId } from 'react'`
+const useId = React[`useId${Math.random()}`.slice(0, 5)];
 const useLayoutEffect_do_not_use_directly = useLayoutEffect;
 
 // The "contextmenu" event is not supported as a PointerEvent in all browsers yet, so MouseEvent still need to be handled
@@ -663,6 +663,11 @@ function updateResizeHandlerStates(action, event) {
   });
 }
 
+function useForceUpdate() {
+  const [_, setCount] = useState(0);
+  return useCallback(() => setCount(prevCount => prevCount + 1), []);
+}
+
 function assert(expectedCondition, message) {
   if (!expectedCondition) {
     console.error(message);
@@ -1572,6 +1577,7 @@ function PanelGroupWithForwardedRef({
   const panelGroupElementRef = useRef(null);
   const [dragState, setDragState] = useState(null);
   const [layout, setLayout] = useState([]);
+  const forceUpdate = useForceUpdate();
   const panelIdToLastNotifiedSizeMapRef = useRef({});
   const panelSizeBeforeCollapseRef = useRef(new Map());
   const prevDeltaRef = useRef(0);
@@ -1834,7 +1840,8 @@ function PanelGroupWithForwardedRef({
       }
     });
     eagerValuesRef.current.panelDataArrayChanged = true;
-  }, []);
+    forceUpdate();
+  }, [forceUpdate]);
 
   // (Re)calculate group layout whenever panels are registered or unregistered.
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -2066,8 +2073,9 @@ function PanelGroupWithForwardedRef({
       // Strict effects mode makes this tricky though because all panels will be registered, unregistered, then re-registered on mount.
       delete panelIdToLastNotifiedSizeMapRef.current[panelData.id];
       eagerValuesRef.current.panelDataArrayChanged = true;
+      forceUpdate();
     }
-  }, []);
+  }, [forceUpdate]);
   const context = useMemo(() => ({
     collapsePanel,
     direction,

package/dist/react-resizable-panels.cjs.js

@@ -45,8 +45,8 @@ const {
   useState
 } = React__namespace;
 
-// `toString()` prevents bundlers from trying to `import { useId } from 'react'`
-const useId = React__namespace["useId".toString()];
+// `Math.random()` and `.slice(0, 5)` prevents bundlers from trying to `import { useId } from 'react'`
+const useId = React__namespace[`useId${Math.random()}`.slice(0, 5)];
 const useLayoutEffect_do_not_use_directly = useLayoutEffect;
 
 // The "contextmenu" event is not supported as a PointerEvent in all browsers yet, so MouseEvent still need to be handled
@@ -689,6 +689,11 @@ function updateResizeHandlerStates(action, event) {
   });
 }
 
+function useForceUpdate() {
+  const [_, setCount] = useState(0);
+  return useCallback(() => setCount(prevCount => prevCount + 1), []);
+}
+
 function assert(expectedCondition, message) {
   if (!expectedCondition) {
     console.error(message);
@@ -1598,6 +1603,7 @@ function PanelGroupWithForwardedRef({
   const panelGroupElementRef = useRef(null);
   const [dragState, setDragState] = useState(null);
   const [layout, setLayout] = useState([]);
+  const forceUpdate = useForceUpdate();
   const panelIdToLastNotifiedSizeMapRef = useRef({});
   const panelSizeBeforeCollapseRef = useRef(new Map());
   const prevDeltaRef = useRef(0);
@@ -1860,7 +1866,8 @@ function PanelGroupWithForwardedRef({
       }
     });
     eagerValuesRef.current.panelDataArrayChanged = true;
-  }, []);
+    forceUpdate();
+  }, [forceUpdate]);
 
   // (Re)calculate group layout whenever panels are registered or unregistered.
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -2092,8 +2099,9 @@ function PanelGroupWithForwardedRef({
       // Strict effects mode makes this tricky though because all panels will be registered, unregistered, then re-registered on mount.
       delete panelIdToLastNotifiedSizeMapRef.current[panelData.id];
       eagerValuesRef.current.panelDataArrayChanged = true;
+      forceUpdate();
     }
-  }, []);
+  }, [forceUpdate]);
   const context = useMemo(() => ({
     collapsePanel,
     direction,

package/dist/react-resizable-panels.development.cjs.js

@@ -45,8 +45,8 @@ const {
   useState
 } = React__namespace;
 
-// `toString()` prevents bundlers from trying to `import { useId } from 'react'`
-const useId = React__namespace["useId".toString()];
+// `Math.random()` and `.slice(0, 5)` prevents bundlers from trying to `import { useId } from 'react'`
+const useId = React__namespace[`useId${Math.random()}`.slice(0, 5)];
 const useLayoutEffect_do_not_use_directly = useLayoutEffect;
 
 // The "contextmenu" event is not supported as a PointerEvent in all browsers yet, so MouseEvent still need to be handled
@@ -700,6 +700,11 @@ function updateResizeHandlerStates(action, event) {
   });
 }
 
+function useForceUpdate() {
+  const [_, setCount] = useState(0);
+  return useCallback(() => setCount(prevCount => prevCount + 1), []);
+}
+
 function assert(expectedCondition, message) {
   if (!expectedCondition) {
     console.error(message);
@@ -1667,6 +1672,7 @@ function PanelGroupWithForwardedRef({
   const panelGroupElementRef = useRef(null);
   const [dragState, setDragState] = useState(null);
   const [layout, setLayout] = useState([]);
+  const forceUpdate = useForceUpdate();
   const panelIdToLastNotifiedSizeMapRef = useRef({});
   const panelSizeBeforeCollapseRef = useRef(new Map());
   const prevDeltaRef = useRef(0);
@@ -1971,7 +1977,8 @@ function PanelGroupWithForwardedRef({
       }
     });
     eagerValuesRef.current.panelDataArrayChanged = true;
-  }, []);
+    forceUpdate();
+  }, [forceUpdate]);
 
   // (Re)calculate group layout whenever panels are registered or unregistered.
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -2203,8 +2210,9 @@ function PanelGroupWithForwardedRef({
       // Strict effects mode makes this tricky though because all panels will be registered, unregistered, then re-registered on mount.
       delete panelIdToLastNotifiedSizeMapRef.current[panelData.id];
       eagerValuesRef.current.panelDataArrayChanged = true;
+      forceUpdate();
     }
-  }, []);
+  }, [forceUpdate]);
   const context = useMemo(() => ({
     collapsePanel,
     direction,

package/dist/react-resizable-panels.development.esm.js

@@ -21,8 +21,8 @@ const {
   useState
 } = React;
 
-// `toString()` prevents bundlers from trying to `import { useId } from 'react'`
-const useId = React["useId".toString()];
+// `Math.random()` and `.slice(0, 5)` prevents bundlers from trying to `import { useId } from 'react'`
+const useId = React[`useId${Math.random()}`.slice(0, 5)];
 const useLayoutEffect_do_not_use_directly = useLayoutEffect;
 
 // The "contextmenu" event is not supported as a PointerEvent in all browsers yet, so MouseEvent still need to be handled
@@ -676,6 +676,11 @@ function updateResizeHandlerStates(action, event) {
   });
 }
 
+function useForceUpdate() {
+  const [_, setCount] = useState(0);
+  return useCallback(() => setCount(prevCount => prevCount + 1), []);
+}
+
 function assert(expectedCondition, message) {
   if (!expectedCondition) {
     console.error(message);
@@ -1643,6 +1648,7 @@ function PanelGroupWithForwardedRef({
   const panelGroupElementRef = useRef(null);
   const [dragState, setDragState] = useState(null);
   const [layout, setLayout] = useState([]);
+  const forceUpdate = useForceUpdate();
   const panelIdToLastNotifiedSizeMapRef = useRef({});
   const panelSizeBeforeCollapseRef = useRef(new Map());
   const prevDeltaRef = useRef(0);
@@ -1947,7 +1953,8 @@ function PanelGroupWithForwardedRef({
       }
     });
     eagerValuesRef.current.panelDataArrayChanged = true;
-  }, []);
+    forceUpdate();
+  }, [forceUpdate]);
 
   // (Re)calculate group layout whenever panels are registered or unregistered.
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -2179,8 +2186,9 @@ function PanelGroupWithForwardedRef({
       // Strict effects mode makes this tricky though because all panels will be registered, unregistered, then re-registered on mount.
       delete panelIdToLastNotifiedSizeMapRef.current[panelData.id];
       eagerValuesRef.current.panelDataArrayChanged = true;
+      forceUpdate();
     }
-  }, []);
+  }, [forceUpdate]);
   const context = useMemo(() => ({
     collapsePanel,
     direction,

package/dist/react-resizable-panels.development.node.cjs.js

@@ -43,8 +43,8 @@ const {
   useState
 } = React__namespace;
 
-// `toString()` prevents bundlers from trying to `import { useId } from 'react'`
-const useId = React__namespace["useId".toString()];
+// `Math.random()` and `.slice(0, 5)` prevents bundlers from trying to `import { useId } from 'react'`
+const useId = React__namespace[`useId${Math.random()}`.slice(0, 5)];
 
 // The "contextmenu" event is not supported as a PointerEvent in all browsers yet, so MouseEvent still need to be handled
 
@@ -662,6 +662,11 @@ function updateResizeHandlerStates(action, event) {
   });
 }
 
+function useForceUpdate() {
+  const [_, setCount] = useState(0);
+  return useCallback(() => setCount(prevCount => prevCount + 1), []);
+}
+
 function assert(expectedCondition, message) {
   if (!expectedCondition) {
     console.error(message);
@@ -1499,6 +1504,7 @@ function PanelGroupWithForwardedRef({
   const panelGroupElementRef = useRef(null);
   const [dragState, setDragState] = useState(null);
   const [layout, setLayout] = useState([]);
+  const forceUpdate = useForceUpdate();
   const panelIdToLastNotifiedSizeMapRef = useRef({});
   const panelSizeBeforeCollapseRef = useRef(new Map());
   const prevDeltaRef = useRef(0);
@@ -1795,7 +1801,8 @@ function PanelGroupWithForwardedRef({
       }
     });
     eagerValuesRef.current.panelDataArrayChanged = true;
-  }, []);
+    forceUpdate();
+  }, [forceUpdate]);
   const registerResizeHandle = useCallback(dragHandleId => {
     return function resizeHandler(event) {
       event.preventDefault();
@@ -1971,8 +1978,9 @@ function PanelGroupWithForwardedRef({
       // Strict effects mode makes this tricky though because all panels will be registered, unregistered, then re-registered on mount.
       delete panelIdToLastNotifiedSizeMapRef.current[panelData.id];
       eagerValuesRef.current.panelDataArrayChanged = true;
+      forceUpdate();
     }
-  }, []);
+  }, [forceUpdate]);
   const context = useMemo(() => ({
     collapsePanel,
     direction,

package/dist/react-resizable-panels.development.node.esm.js

@@ -19,8 +19,8 @@ const {
   useState
 } = React;
 
-// `toString()` prevents bundlers from trying to `import { useId } from 'react'`
-const useId = React["useId".toString()];
+// `Math.random()` and `.slice(0, 5)` prevents bundlers from trying to `import { useId } from 'react'`
+const useId = React[`useId${Math.random()}`.slice(0, 5)];
 
 // The "contextmenu" event is not supported as a PointerEvent in all browsers yet, so MouseEvent still need to be handled
 
@@ -638,6 +638,11 @@ function updateResizeHandlerStates(action, event) {
   });
 }
 
+function useForceUpdate() {
+  const [_, setCount] = useState(0);
+  return useCallback(() => setCount(prevCount => prevCount + 1), []);
+}
+
 function assert(expectedCondition, message) {
   if (!expectedCondition) {
     console.error(message);
@@ -1475,6 +1480,7 @@ function PanelGroupWithForwardedRef({
   const panelGroupElementRef = useRef(null);
   const [dragState, setDragState] = useState(null);
   const [layout, setLayout] = useState([]);
+  const forceUpdate = useForceUpdate();
   const panelIdToLastNotifiedSizeMapRef = useRef({});
   const panelSizeBeforeCollapseRef = useRef(new Map());
   const prevDeltaRef = useRef(0);
@@ -1771,7 +1777,8 @@ function PanelGroupWithForwardedRef({
       }
     });
     eagerValuesRef.current.panelDataArrayChanged = true;
-  }, []);
+    forceUpdate();
+  }, [forceUpdate]);
   const registerResizeHandle = useCallback(dragHandleId => {
     return function resizeHandler(event) {
       event.preventDefault();
@@ -1947,8 +1954,9 @@ function PanelGroupWithForwardedRef({
       // Strict effects mode makes this tricky though because all panels will be registered, unregistered, then re-registered on mount.
       delete panelIdToLastNotifiedSizeMapRef.current[panelData.id];
       eagerValuesRef.current.panelDataArrayChanged = true;
+      forceUpdate();
     }
-  }, []);
+  }, [forceUpdate]);
   const context = useMemo(() => ({
     collapsePanel,
     direction,

package/dist/react-resizable-panels.esm.js

@@ -21,8 +21,8 @@ const {
   useState
 } = React;
 
-// `toString()` prevents bundlers from trying to `import { useId } from 'react'`
-const useId = React["useId".toString()];
+// `Math.random()` and `.slice(0, 5)` prevents bundlers from trying to `import { useId } from 'react'`
+const useId = React[`useId${Math.random()}`.slice(0, 5)];
 const useLayoutEffect_do_not_use_directly = useLayoutEffect;
 
 // The "contextmenu" event is not supported as a PointerEvent in all browsers yet, so MouseEvent still need to be handled
@@ -665,6 +665,11 @@ function updateResizeHandlerStates(action, event) {
   });
 }
 
+function useForceUpdate() {
+  const [_, setCount] = useState(0);
+  return useCallback(() => setCount(prevCount => prevCount + 1), []);
+}
+
 function assert(expectedCondition, message) {
   if (!expectedCondition) {
     console.error(message);
@@ -1574,6 +1579,7 @@ function PanelGroupWithForwardedRef({
   const panelGroupElementRef = useRef(null);
   const [dragState, setDragState] = useState(null);
   const [layout, setLayout] = useState([]);
+  const forceUpdate = useForceUpdate();
   const panelIdToLastNotifiedSizeMapRef = useRef({});
   const panelSizeBeforeCollapseRef = useRef(new Map());
   const prevDeltaRef = useRef(0);
@@ -1836,7 +1842,8 @@ function PanelGroupWithForwardedRef({
       }
     });
     eagerValuesRef.current.panelDataArrayChanged = true;
-  }, []);
+    forceUpdate();
+  }, [forceUpdate]);
 
   // (Re)calculate group layout whenever panels are registered or unregistered.
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -2068,8 +2075,9 @@ function PanelGroupWithForwardedRef({
       // Strict effects mode makes this tricky though because all panels will be registered, unregistered, then re-registered on mount.
       delete panelIdToLastNotifiedSizeMapRef.current[panelData.id];
       eagerValuesRef.current.panelDataArrayChanged = true;
+      forceUpdate();
     }
-  }, []);
+  }, [forceUpdate]);
   const context = useMemo(() => ({
     collapsePanel,
     direction,

package/dist/react-resizable-panels.node.cjs.js

@@ -43,8 +43,8 @@ const {
   useState
 } = React__namespace;
 
-// `toString()` prevents bundlers from trying to `import { useId } from 'react'`
-const useId = React__namespace["useId".toString()];
+// `Math.random()` and `.slice(0, 5)` prevents bundlers from trying to `import { useId } from 'react'`
+const useId = React__namespace[`useId${Math.random()}`.slice(0, 5)];
 
 // The "contextmenu" event is not supported as a PointerEvent in all browsers yet, so MouseEvent still need to be handled
 
@@ -651,6 +651,11 @@ function updateResizeHandlerStates(action, event) {
   });
 }
 
+function useForceUpdate() {
+  const [_, setCount] = useState(0);
+  return useCallback(() => setCount(prevCount => prevCount + 1), []);
+}
+
 function assert(expectedCondition, message) {
   if (!expectedCondition) {
     console.error(message);
@@ -1440,6 +1445,7 @@ function PanelGroupWithForwardedRef({
   const panelGroupElementRef = useRef(null);
   const [dragState, setDragState] = useState(null);
   const [layout, setLayout] = useState([]);
+  const forceUpdate = useForceUpdate();
   const panelIdToLastNotifiedSizeMapRef = useRef({});
   const panelSizeBeforeCollapseRef = useRef(new Map());
   const prevDeltaRef = useRef(0);
@@ -1694,7 +1700,8 @@ function PanelGroupWithForwardedRef({
       }
     });
     eagerValuesRef.current.panelDataArrayChanged = true;
-  }, []);
+    forceUpdate();
+  }, [forceUpdate]);
   const registerResizeHandle = useCallback(dragHandleId => {
     return function resizeHandler(event) {
       event.preventDefault();
@@ -1870,8 +1877,9 @@ function PanelGroupWithForwardedRef({
       // Strict effects mode makes this tricky though because all panels will be registered, unregistered, then re-registered on mount.
       delete panelIdToLastNotifiedSizeMapRef.current[panelData.id];
       eagerValuesRef.current.panelDataArrayChanged = true;
+      forceUpdate();
     }
-  }, []);
+  }, [forceUpdate]);
   const context = useMemo(() => ({
     collapsePanel,
     direction,

package/dist/react-resizable-panels.node.esm.js

@@ -19,8 +19,8 @@ const {
   useState
 } = React;
 
-// `toString()` prevents bundlers from trying to `import { useId } from 'react'`
-const useId = React["useId".toString()];
+// `Math.random()` and `.slice(0, 5)` prevents bundlers from trying to `import { useId } from 'react'`
+const useId = React[`useId${Math.random()}`.slice(0, 5)];
 
 // The "contextmenu" event is not supported as a PointerEvent in all browsers yet, so MouseEvent still need to be handled
 
@@ -627,6 +627,11 @@ function updateResizeHandlerStates(action, event) {
   });
 }
 
+function useForceUpdate() {
+  const [_, setCount] = useState(0);
+  return useCallback(() => setCount(prevCount => prevCount + 1), []);
+}
+
 function assert(expectedCondition, message) {
   if (!expectedCondition) {
     console.error(message);
@@ -1416,6 +1421,7 @@ function PanelGroupWithForwardedRef({
   const panelGroupElementRef = useRef(null);
   const [dragState, setDragState] = useState(null);
   const [layout, setLayout] = useState([]);
+  const forceUpdate = useForceUpdate();
   const panelIdToLastNotifiedSizeMapRef = useRef({});
   const panelSizeBeforeCollapseRef = useRef(new Map());
   const prevDeltaRef = useRef(0);
@@ -1670,7 +1676,8 @@ function PanelGroupWithForwardedRef({
       }
     });
     eagerValuesRef.current.panelDataArrayChanged = true;
-  }, []);
+    forceUpdate();
+  }, [forceUpdate]);
   const registerResizeHandle = useCallback(dragHandleId => {
     return function resizeHandler(event) {
       event.preventDefault();
@@ -1846,8 +1853,9 @@ function PanelGroupWithForwardedRef({
       // Strict effects mode makes this tricky though because all panels will be registered, unregistered, then re-registered on mount.
       delete panelIdToLastNotifiedSizeMapRef.current[panelData.id];
       eagerValuesRef.current.panelDataArrayChanged = true;
+      forceUpdate();
     }
-  }, []);
+  }, [forceUpdate]);
   const context = useMemo(() => ({
     collapsePanel,
     direction,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-resizable-panels",
-  "version": "2.0.21",
+  "version": "2.0.23",
   "description": "React components for resizable panel groups/layouts",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com>",
   "license": "MIT",

package/src/PanelGroup.ts

@@ -13,6 +13,7 @@ import {
   EXCEEDED_VERTICAL_MIN,
   reportConstraintsViolation,
 } from "./PanelResizeHandleRegistry";
+import { useForceUpdate } from "./hooks/useForceUpdate";
 import useIsomorphicLayoutEffect from "./hooks/useIsomorphicEffect";
 import useUniqueId from "./hooks/useUniqueId";
 import { useWindowSplitterPanelGroupBehavior } from "./hooks/useWindowSplitterPanelGroupBehavior";
@@ -123,6 +124,7 @@ function PanelGroupWithForwardedRef({
   const panelGroupElementRef = useRef<HTMLDivElement | null>(null);
   const [dragState, setDragState] = useState<DragState | null>(null);
   const [layout, setLayout] = useState<number[]>([]);
+  const forceUpdate = useForceUpdate();
 
   const panelIdToLastNotifiedSizeMapRef = useRef<Record<string, number>>({});
   const panelSizeBeforeCollapseRef = useRef<Map<string, number>>(new Map());
@@ -521,26 +523,31 @@ function PanelGroupWithForwardedRef({
     return !collapsible || fuzzyCompareNumbers(panelSize, collapsedSize) > 0;
   }, []);
 
-  const registerPanel = useCallback((panelData: PanelData) => {
-    const { panelDataArray } = eagerValuesRef.current;
+  const registerPanel = useCallback(
+    (panelData: PanelData) => {
+      const { panelDataArray } = eagerValuesRef.current;
 
-    panelDataArray.push(panelData);
-    panelDataArray.sort((panelA, panelB) => {
-      const orderA = panelA.order;
-      const orderB = panelB.order;
-      if (orderA == null && orderB == null) {
-        return 0;
-      } else if (orderA == null) {
-        return -1;
-      } else if (orderB == null) {
-        return 1;
-      } else {
-        return orderA - orderB;
-      }
-    });
+      panelDataArray.push(panelData);
+      panelDataArray.sort((panelA, panelB) => {
+        const orderA = panelA.order;
+        const orderB = panelB.order;
+        if (orderA == null && orderB == null) {
+          return 0;
+        } else if (orderA == null) {
+          return -1;
+        } else if (orderB == null) {
+          return 1;
+        } else {
+          return orderA - orderB;
+        }
+      });
 
-    eagerValuesRef.current.panelDataArrayChanged = true;
-  }, []);
+      eagerValuesRef.current.panelDataArrayChanged = true;
+
+      forceUpdate();
+    },
+    [forceUpdate]
+  );
 
   // (Re)calculate group layout whenever panels are registered or unregistered.
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -844,22 +851,27 @@ function PanelGroupWithForwardedRef({
     setDragState(null);
   }, []);
 
-  const unregisterPanel = useCallback((panelData: PanelData) => {
-    const { panelDataArray } = eagerValuesRef.current;
+  const unregisterPanel = useCallback(
+    (panelData: PanelData) => {
+      const { panelDataArray } = eagerValuesRef.current;
 
-    const index = findPanelDataIndex(panelDataArray, panelData);
-    if (index >= 0) {
-      panelDataArray.splice(index, 1);
+      const index = findPanelDataIndex(panelDataArray, panelData);
+      if (index >= 0) {
+        panelDataArray.splice(index, 1);
 
-      // TRICKY
-      // When a panel is removed from the group, we should delete the most recent prev-size entry for it.
-      // If we don't do this, then a conditionally rendered panel might not call onResize when it's re-mounted.
-      // Strict effects mode makes this tricky though because all panels will be registered, unregistered, then re-registered on mount.
-      delete panelIdToLastNotifiedSizeMapRef.current[panelData.id];
+        // TRICKY
+        // When a panel is removed from the group, we should delete the most recent prev-size entry for it.
+        // If we don't do this, then a conditionally rendered panel might not call onResize when it's re-mounted.
+        // Strict effects mode makes this tricky though because all panels will be registered, unregistered, then re-registered on mount.
+        delete panelIdToLastNotifiedSizeMapRef.current[panelData.id];
 
-      eagerValuesRef.current.panelDataArrayChanged = true;
-    }
-  }, []);
+        eagerValuesRef.current.panelDataArrayChanged = true;
+
+        forceUpdate();
+      }
+    },
+    [forceUpdate]
+  );
 
   const context = useMemo(
     () =>

package/src/hooks/useForceUpdate.ts

@@ -0,0 +1,7 @@
+import { useCallback, useState } from "../vendor/react";
+
+export function useForceUpdate() {
+  const [_, setCount] = useState(0);
+
+  return useCallback(() => setCount((prevCount) => prevCount + 1), []);
+}

package/src/vendor/react.ts

@@ -36,8 +36,10 @@ const {
   useState,
 } = React;
 
-// `toString()` prevents bundlers from trying to `import { useId } from 'react'`
-const useId = (React as any)["useId".toString()] as () => string;
+// `Math.random()` and `.slice(0, 5)` prevents bundlers from trying to `import { useId } from 'react'`
+const useId = (React as any)[
+  `useId${Math.random()}`.slice(0, 5)
+] as () => string;
 
 const useLayoutEffect_do_not_use_directly = useLayoutEffect;