Avoid re-registering Panel when props change

packages/react-resizable-panels/src/Panel.ts

@@ -1,3 +1,5 @@
+import useIsomorphicLayoutEffect from "./hooks/useIsomorphicEffect";
+import useUniqueId from "./hooks/useUniqueId";
 import {
   createElement,
   CSSProperties,
@@ -10,11 +12,14 @@ import {
   useImperativeHandle,
   useRef,
 } from "./vendor/react";
-import useIsomorphicLayoutEffect from "./hooks/useIsomorphicEffect";
-import useUniqueId from "./hooks/useUniqueId";
 
 import { PanelGroupContext } from "./PanelContexts";
-import { PanelOnCollapse, PanelOnResize } from "./types";
+import {
+  PanelCallbackRef,
+  PanelData,
+  PanelOnCollapse,
+  PanelOnResize,
+} from "./types";
 
 export type PanelProps = {
   children?: ReactNode;
@@ -105,44 +110,50 @@ function PanelWithForwardedRef({
     }
   }
 
-  useIsomorphicLayoutEffect(() => {
-    const panel = {
-      callbacksRef,
-      collapsible,
-      defaultSize,
-      id: panelId,
-      maxSize,
-      minSize,
-      order,
-    };
-
-    registerPanel(panelId, panel);
-
-    return () => {
-      unregisterPanel(panelId);
-    };
-  }, [
-    collapsible,
-    defaultSize,
-    panelId,
-    maxSize,
-    minSize,
-    order,
-    registerPanel,
-    unregisterPanel,
-  ]);
-
   const style = getPanelStyle(panelId);
 
   const committedValuesRef = useRef<{
     size: number;
   }>({
     size: parseSizeFromStyle(style),
   });
+  const panelDataRef = useRef<{
+    callbacksRef: PanelCallbackRef;
+    collapsible: boolean;
+    defaultSize: number | null;
+    id: string;
+    maxSize: number;
+    minSize: number;
+    order: number | null;
+  }>({
+    callbacksRef,
+    collapsible,
+    defaultSize,
+    id: panelId,
+    maxSize,
+    minSize,
+    order,
+  });
   useIsomorphicLayoutEffect(() => {
     committedValuesRef.current.size = parseSizeFromStyle(style);
+
+    panelDataRef.current.callbacksRef = callbacksRef;
+    panelDataRef.current.collapsible = collapsible;
+    panelDataRef.current.defaultSize = defaultSize;
+    panelDataRef.current.id = panelId;
+    panelDataRef.current.maxSize = maxSize;
+    panelDataRef.current.minSize = minSize;
+    panelDataRef.current.order = order;
   });
 
+  useIsomorphicLayoutEffect(() => {
+    registerPanel(panelId, panelDataRef as PanelData);
+
+    return () => {
+      unregisterPanel(panelId);
+    };
+  }, [registerPanel, unregisterPanel]);
+
   useImperativeHandle(
     forwardedRef,
     () => ({

packages/react-resizable-panels/src/PanelGroup.ts

@@ -260,12 +260,12 @@ function PanelGroupWithForwardedRef({
       // For now, these logic edge cases are left to the user to handle via props.
 
       panelsArray.forEach((panel) => {
-        totalMinSize += panel.minSize;
+        totalMinSize += panel.current.minSize;
 
-        if (panel.defaultSize === null) {
+        if (panel.current.defaultSize === null) {
           panelsWithNullDefaultSize++;
         } else {
-          totalDefaultSize += panel.defaultSize;
+          totalDefaultSize += panel.current.defaultSize;
         }
       });
 
@@ -281,11 +281,11 @@ function PanelGroupWithForwardedRef({
 
       setSizes(
         panelsArray.map((panel) => {
-          if (panel.defaultSize === null) {
+          if (panel.current.defaultSize === null) {
             return (100 - totalDefaultSize) / panelsWithNullDefaultSize;
           }
 
-          return panel.defaultSize;
+          return panel.current.defaultSize;
         })
       );
     }
@@ -347,14 +347,14 @@ function PanelGroupWithForwardedRef({
     [activeHandleId, disablePointerEventsDuringResize, sizes]
   );
 
-  const registerPanel = useCallback((id: string, panel: PanelData) => {
+  const registerPanel = useCallback((id: string, panelRef: PanelData) => {
     setPanels((prevPanels) => {
       if (prevPanels.has(id)) {
         return prevPanels;
       }
 
       const nextPanels = new Map(prevPanels);
-      nextPanels.set(id, panel);
+      nextPanels.set(id, panelRef);
 
       return nextPanels;
     });
@@ -473,7 +473,7 @@ function PanelGroupWithForwardedRef({
     const { panels, sizes: prevSizes } = committedValuesRef.current;
 
     const panel = panels.get(id);
-    if (panel == null || !panel.collapsible) {
+    if (panel == null || !panel.current.collapsible) {
       return;
     }
 
@@ -527,7 +527,7 @@ function PanelGroupWithForwardedRef({
     }
 
     const sizeBeforeCollapse =
-      panelSizeBeforeCollapse.current.get(id) || panel.minSize;
+      panelSizeBeforeCollapse.current.get(id) || panel.current.minSize;
     if (!sizeBeforeCollapse) {
       return;
     }
@@ -591,10 +591,13 @@ function PanelGroupWithForwardedRef({
       return;
     }
 
-    if (panel.collapsible && nextSize === 0) {
+    if (panel.current.collapsible && nextSize === 0) {
       // This is a valid resize state.
     } else {
-      nextSize = Math.min(panel.maxSize, Math.max(panel.minSize, nextSize));
+      nextSize = Math.min(
+        panel.current.maxSize,
+        Math.max(panel.current.minSize, nextSize)
+      );
     }
 
     const [idBefore, idAfter] = getBeforeAndAfterIds(id, panelsArray);

packages/react-resizable-panels/src/hooks/useWindowSplitterBehavior.ts

@@ -61,12 +61,12 @@ export function useWindowSplitterPanelGroupBehavior({
 
       // A panel's effective min/max sizes also need to account for other panel's sizes.
       panelsArray.forEach((panelData) => {
-        if (panelData.id === idBefore) {
-          maxSize = panelData.maxSize;
-          minSize = panelData.minSize;
+        if (panelData.current.id === idBefore) {
+          maxSize = panelData.current.maxSize;
+          minSize = panelData.current.minSize;
         } else {
-          totalMinSize += panelData.minSize;
-          totalMaxSize += panelData.maxSize;
+          totalMinSize += panelData.current.minSize;
+          totalMaxSize += panelData.current.maxSize;
         }
       });
 
@@ -92,7 +92,7 @@ export function useWindowSplitterPanelGroupBehavior({
             event.preventDefault();
 
             const index = panelsArray.findIndex(
-              (panel) => panel.id === idBefore
+              (panel) => panel.current.id === idBefore
             );
             if (index >= 0) {
               const panelData = panelsArray[index];
@@ -101,7 +101,7 @@ export function useWindowSplitterPanelGroupBehavior({
                 let delta = 0;
                 if (
                   size.toPrecision(PRECISION) <=
-                  panelData.minSize.toPrecision(PRECISION)
+                  panelData.current.minSize.toPrecision(PRECISION)
                 ) {
                   delta = direction === "horizontal" ? width : height;
                 } else {

packages/react-resizable-panels/src/types.ts

@@ -12,17 +12,21 @@ export type PanelOnCollapse = (collapsed: boolean) => void;
 export type PanelOnResize = (size: number) => void;
 export type PanelResizeHandleOnDragging = (isDragging: boolean) => void;
 
+export type PanelCallbackRef = RefObject<{
+  onCollapse: PanelOnCollapse | null;
+  onResize: PanelOnResize | null;
+}>;
+
 export type PanelData = {
-  callbacksRef: RefObject<{
-    onCollapse: PanelOnCollapse | null;
-    onResize: PanelOnResize | null;
-  }>;
-  collapsible: boolean;
-  defaultSize: number | null;
-  id: string;
-  maxSize: number;
-  minSize: number;
-  order: number | null;
+  current: {
+    callbacksRef: PanelCallbackRef;
+    collapsible: boolean;
+    defaultSize: number | null;
+    id: string;
+    maxSize: number;
+    minSize: number;
+    order: number | null;
+  };
 };
 
 export type ResizeEvent = KeyboardEvent | MouseEvent | TouchEvent;

packages/react-resizable-panels/src/utils/coordinates.ts

@@ -107,20 +107,20 @@ export function getMovement(
     );
     const targetPanelId = movement < 0 ? idBefore : idAfter;
     const targetPanelIndex = panelsArray.findIndex(
-      (panel) => panel.id === targetPanelId
+      (panel) => panel.current.id === targetPanelId
     );
     const targetPanel = panelsArray[targetPanelIndex];
-    if (targetPanel.collapsible) {
+    if (targetPanel.current.collapsible) {
       const baseSize = baseSizes[targetPanelIndex];
       if (
         baseSize === 0 ||
         baseSize.toPrecision(PRECISION) ===
-          targetPanel.minSize.toPrecision(PRECISION)
+          targetPanel.current.minSize.toPrecision(PRECISION)
       ) {
         movement =
           movement < 0
-            ? -targetPanel.minSize * groupSizeInPixels
-            : targetPanel.minSize * groupSizeInPixels;
+            ? -targetPanel.current.minSize * groupSizeInPixels
+            : targetPanel.current.minSize * groupSizeInPixels;
       }
     }