Don't re-mount Group if defaultLayout changes

Author: bvaughn

lib/components/group/Group.test.tsx

@@ -6,8 +6,47 @@ import { Panel } from "../panel/Panel";
 import { Separator } from "../separator/Separator";
 import { Group } from "./Group";
 import { assert } from "../../utils/assert";
+import { eventEmitter } from "../../global/mutableState";
 
 describe("Group", () => {
+  test("changes to defaultProps or disableCursor should not cause Group to remount", () => {
+    const onMountedGroupsChange = vi.fn();
+    const removeListener = eventEmitter.addListener(
+      "mountedGroupsChange",
+      onMountedGroupsChange
+    );
+
+    const { rerender } = render(
+      <Group
+        defaultLayout={{
+          a: 50,
+          b: 50
+        }}
+        disableCursor={false}
+      >
+        <Panel id="a" />
+        <Panel id="b" />
+      </Group>
+    );
+    expect(onMountedGroupsChange).toHaveBeenCalledTimes(1);
+
+    rerender(
+      <Group
+        defaultLayout={{
+          a: 35,
+          b: 65
+        }}
+        disableCursor={true}
+      >
+        <Panel id="a" />
+        <Panel id="b" />
+      </Group>
+    );
+    expect(onMountedGroupsChange).toHaveBeenCalledTimes(1);
+
+    removeListener();
+  });
+
   describe("onLayoutChange", () => {
     beforeEach(() => {
       setElementBoundsFunction((element) => {

lib/components/group/Group.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { mountGroup } from "../../global/mountGroup";
 import { eventEmitter, read } from "../../global/mutableState";
 import { layoutsEqual } from "../../global/utils/layoutsEqual";
@@ -15,6 +15,7 @@ import { GroupContext } from "./GroupContext";
 import { sortByElementOffset } from "./sortByElementOffset";
 import type { GroupProps, Layout, RegisteredGroup } from "./types";
 import { useGroupImperativeHandle } from "./useGroupImperativeHandle";
+import { useStableObject } from "../../hooks/useStableObject";
 
 /**
  * A Group wraps a set of resizable Panel components.
@@ -97,6 +98,13 @@ export function Group({
     [id, orientation]
   );
 
+  const stableProps = useStableObject({
+    defaultLayout,
+    disableCursor
+  });
+
+  const registeredGroupRef = useRef<RegisteredGroup | null>(null);
+
   // Register Group and child Panels/Separators with global state
   // Listen to global state for drag state related to this Group
   useIsomorphicLayoutEffect(() => {
@@ -105,8 +113,8 @@ export function Group({
     }
 
     const group: RegisteredGroup = {
-      defaultLayout,
-      disableCursor: !!disableCursor,
+      defaultLayout: stableProps.defaultLayout,
+      disableCursor: !!stableProps.disableCursor,
       disabled: !!disabled,
       element,
       id,
@@ -117,6 +125,8 @@ export function Group({
       separators
     };
 
+    registeredGroupRef.current = group;
+
     const unmountGroup = mountGroup(group);
 
     const globalState = read();
@@ -158,22 +168,33 @@ export function Group({
     );
 
     return () => {
+      registeredGroupRef.current = null;
+
       unmountGroup();
       removeInteractionStateChangeListener();
       removeMountedGroupsChangeEventListener();
     };
   }, [
-    defaultLayout,
-    disableCursor,
     disabled,
     element,
     id,
     onLayoutChangeStable,
     orientation,
     panels,
-    separators
+    separators,
+    stableProps
   ]);
 
+  // Not all props require re-registering the group;
+  // Some can be updated after the group has been registered
+  useEffect(() => {
+    const registeredGroup = registeredGroupRef.current;
+    if (registeredGroup) {
+      registeredGroup.defaultLayout = defaultLayout;
+      registeredGroup.disableCursor = !!disableCursor;
+    }
+  });
+
   // Panel layouts and Group dragging state are shared via CSS variables
   const cssVariables: { [key: string]: number | string | undefined } = {
     [POINTER_EVENTS_CSS_PROPERTY_NAME]: dragActive ? "none" : undefined