react-resizable-panels 0.0.50 → 0.0.51

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.0.51
+* [154](https://github.com/bvaughn/react-resizable-panels/issues/154): `onResize` and `onCollapse` props are called in response to `PanelGroup.setLayout`
+* [123](https://github.com/bvaughn/react-resizable-panels/issues/123): `onResize` called when number of panels in a group change due to conditional rendering
+
 ## 0.0.50
 * Improved panel size validation in `PanelGroup`.
 

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

@@ -281,27 +281,29 @@ function adjustByDelta(event, panels, idBefore, idAfter, delta, prevSizes, panel
   nextSizes[index] = baseSizes[index] + deltaApplied;
   return nextSizes;
 }
-function callPanelCallbacks(panelsArray, prevSizes, nextSizes) {
-  nextSizes.forEach((nextSize, index) => {
-    const prevSize = prevSizes[index];
-    if (prevSize !== nextSize) {
-      const {
-        callbacksRef,
-        collapsible
-      } = panelsArray[index].current;
+function callPanelCallbacks(panelsArray, sizes, panelIdToLastNotifiedSizeMap) {
+  sizes.forEach((size, index) => {
+    const {
+      callbacksRef,
+      collapsible,
+      id
+    } = panelsArray[index].current;
+    const lastNotifiedSize = panelIdToLastNotifiedSizeMap[id];
+    if (lastNotifiedSize !== size) {
+      panelIdToLastNotifiedSizeMap[id] = size;
       const {
         onCollapse,
         onResize
       } = callbacksRef.current;
       if (onResize) {
-        onResize(nextSize);
+        onResize(size);
       }
       if (collapsible && onCollapse) {
         // Falsy check handles both previous size of 0
         // and initial size of undefined (when mounting)
-        if (!prevSize && nextSize !== 0) {
+        if (!lastNotifiedSize && size !== 0) {
           onCollapse(false);
-        } else if (prevSize !== 0 && nextSize === 0) {
+        } else if (lastNotifiedSize !== 0 && size === 0) {
           onCollapse(true);
         }
       }
@@ -837,6 +839,7 @@ function PanelGroupWithForwardedRef({
   useEffect(() => {
     callbacksRef.current.onLayout = onLayout;
   });
+  const panelIdToLastNotifiedSizeMapRef = useRef({});
 
   // 0-1 values representing the relative size of each panel.
   const [sizes, setSizes] = useState([]);
@@ -861,6 +864,12 @@ function PanelGroupWithForwardedRef({
     setLayout: sizes => {
       const total = sizes.reduce((accumulated, current) => accumulated + current, 0);
       assert(total === 100, "Panel sizes must add up to 100%");
+      const {
+        panels
+      } = committedValuesRef.current;
+      const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
+      const panelsArray = panelsMapToSortedArray(panels);
+      callPanelCallbacks(panelsArray, sizes, panelIdToLastNotifiedSizeMap);
       setSizes(sizes);
     }
   }), []);
@@ -885,31 +894,23 @@ function PanelGroupWithForwardedRef({
     } = callbacksRef.current;
     if (onLayout) {
       const {
+        panels,
         sizes
       } = committedValuesRef.current;
 
       // Don't commit layout until all panels have registered and re-rendered with their actual sizes.
       if (sizes.length > 0) {
         onLayout(sizes);
-      }
-    }
-  }, [sizes]);
+        const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
 
-  // Notify Panel listeners about their initial sizes and collapsed state after mount.
-  // Subsequent changes will be called by the resizeHandler.
-  const didNotifyCallbacksAfterMountRef = useRef(false);
-  useIsomorphicLayoutEffect(() => {
-    if (didNotifyCallbacksAfterMountRef.current) {
-      return;
-    }
-    const {
-      panels,
-      sizes
-    } = committedValuesRef.current;
-    if (sizes.length > 0) {
-      didNotifyCallbacksAfterMountRef.current = true;
-      const panelsArray = panelsMapToSortedArray(panels);
-      callPanelCallbacks(panelsArray, [], sizes);
+        // When possible, we notify before the next render so that rendering work can be batched together.
+        // Some cases are difficult to detect though,
+        // for example– panels that are conditionally rendered can affect the size of neighboring panels.
+        // In this case, the best we can do is notify on commit.
+        // The callPanelCallbacks() uses its own memoization to avoid notifying panels twice in these cases.
+        const panelsArray = panelsMapToSortedArray(panels);
+        callPanelCallbacks(panelsArray, sizes, panelIdToLastNotifiedSizeMap);
+      }
     }
   }, [sizes]);
 
@@ -1073,8 +1074,10 @@ function PanelGroupWithForwardedRef({
         }
       }
       if (sizesChanged) {
+        const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
+
         // If resize change handlers have been declared, this is the time to call them.
-        callPanelCallbacks(panelsArray, prevSizes, nextSizes);
+        callPanelCallbacks(panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
         setSizes(nextSizes);
       }
       prevDeltaRef.current = delta;
@@ -1119,8 +1122,10 @@ function PanelGroupWithForwardedRef({
     const delta = isLastPanel ? currentSize : 0 - currentSize;
     const nextSizes = adjustByDelta(null, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, null);
     if (prevSizes !== nextSizes) {
+      const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
+
       // If resize change handlers have been declared, this is the time to call them.
-      callPanelCallbacks(panelsArray, prevSizes, nextSizes);
+      callPanelCallbacks(panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
       setSizes(nextSizes);
     }
   }, []);
@@ -1155,8 +1160,10 @@ function PanelGroupWithForwardedRef({
     const delta = isLastPanel ? 0 - sizeBeforeCollapse : sizeBeforeCollapse;
     const nextSizes = adjustByDelta(null, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, null);
     if (prevSizes !== nextSizes) {
+      const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
+
       // If resize change handlers have been declared, this is the time to call them.
-      callPanelCallbacks(panelsArray, prevSizes, nextSizes);
+      callPanelCallbacks(panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
       setSizes(nextSizes);
     }
   }, []);
@@ -1189,8 +1196,10 @@ function PanelGroupWithForwardedRef({
     const delta = isLastPanel ? currentSize - nextSize : nextSize - currentSize;
     const nextSizes = adjustByDelta(null, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, null);
     if (prevSizes !== nextSizes) {
+      const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
+
       // If resize change handlers have been declared, this is the time to call them.
-      callPanelCallbacks(panelsArray, prevSizes, nextSizes);
+      callPanelCallbacks(panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
       setSizes(nextSizes);
     }
   }, []);

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

@@ -281,27 +281,29 @@ function adjustByDelta(event, panels, idBefore, idAfter, delta, prevSizes, panel
   nextSizes[index] = baseSizes[index] + deltaApplied;
   return nextSizes;
 }
-function callPanelCallbacks(panelsArray, prevSizes, nextSizes) {
-  nextSizes.forEach((nextSize, index) => {
-    const prevSize = prevSizes[index];
-    if (prevSize !== nextSize) {
-      const {
-        callbacksRef,
-        collapsible
-      } = panelsArray[index].current;
+function callPanelCallbacks(panelsArray, sizes, panelIdToLastNotifiedSizeMap) {
+  sizes.forEach((size, index) => {
+    const {
+      callbacksRef,
+      collapsible,
+      id
+    } = panelsArray[index].current;
+    const lastNotifiedSize = panelIdToLastNotifiedSizeMap[id];
+    if (lastNotifiedSize !== size) {
+      panelIdToLastNotifiedSizeMap[id] = size;
       const {
         onCollapse,
         onResize
       } = callbacksRef.current;
       if (onResize) {
-        onResize(nextSize);
+        onResize(size);
       }
       if (collapsible && onCollapse) {
         // Falsy check handles both previous size of 0
         // and initial size of undefined (when mounting)
-        if (!prevSize && nextSize !== 0) {
+        if (!lastNotifiedSize && size !== 0) {
           onCollapse(false);
-        } else if (prevSize !== 0 && nextSize === 0) {
+        } else if (lastNotifiedSize !== 0 && size === 0) {
           onCollapse(true);
         }
       }
@@ -844,6 +846,7 @@ function PanelGroupWithForwardedRef({
   useEffect(() => {
     callbacksRef.current.onLayout = onLayout;
   });
+  const panelIdToLastNotifiedSizeMapRef = useRef({});
 
   // 0-1 values representing the relative size of each panel.
   const [sizes, setSizes] = useState([]);
@@ -868,6 +871,12 @@ function PanelGroupWithForwardedRef({
     setLayout: sizes => {
       const total = sizes.reduce((accumulated, current) => accumulated + current, 0);
       assert(total === 100, "Panel sizes must add up to 100%");
+      const {
+        panels
+      } = committedValuesRef.current;
+      const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
+      const panelsArray = panelsMapToSortedArray(panels);
+      callPanelCallbacks(panelsArray, sizes, panelIdToLastNotifiedSizeMap);
       setSizes(sizes);
     }
   }), []);
@@ -892,31 +901,23 @@ function PanelGroupWithForwardedRef({
     } = callbacksRef.current;
     if (onLayout) {
       const {
+        panels,
         sizes
       } = committedValuesRef.current;
 
       // Don't commit layout until all panels have registered and re-rendered with their actual sizes.
       if (sizes.length > 0) {
         onLayout(sizes);
-      }
-    }
-  }, [sizes]);
+        const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
 
-  // Notify Panel listeners about their initial sizes and collapsed state after mount.
-  // Subsequent changes will be called by the resizeHandler.
-  const didNotifyCallbacksAfterMountRef = useRef(false);
-  useIsomorphicLayoutEffect(() => {
-    if (didNotifyCallbacksAfterMountRef.current) {
-      return;
-    }
-    const {
-      panels,
-      sizes
-    } = committedValuesRef.current;
-    if (sizes.length > 0) {
-      didNotifyCallbacksAfterMountRef.current = true;
-      const panelsArray = panelsMapToSortedArray(panels);
-      callPanelCallbacks(panelsArray, [], sizes);
+        // When possible, we notify before the next render so that rendering work can be batched together.
+        // Some cases are difficult to detect though,
+        // for example– panels that are conditionally rendered can affect the size of neighboring panels.
+        // In this case, the best we can do is notify on commit.
+        // The callPanelCallbacks() uses its own memoization to avoid notifying panels twice in these cases.
+        const panelsArray = panelsMapToSortedArray(panels);
+        callPanelCallbacks(panelsArray, sizes, panelIdToLastNotifiedSizeMap);
+      }
     }
   }, [sizes]);
 
@@ -1085,8 +1086,10 @@ function PanelGroupWithForwardedRef({
         }
       }
       if (sizesChanged) {
+        const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
+
         // If resize change handlers have been declared, this is the time to call them.
-        callPanelCallbacks(panelsArray, prevSizes, nextSizes);
+        callPanelCallbacks(panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
         setSizes(nextSizes);
       }
       prevDeltaRef.current = delta;
@@ -1131,8 +1134,10 @@ function PanelGroupWithForwardedRef({
     const delta = isLastPanel ? currentSize : 0 - currentSize;
     const nextSizes = adjustByDelta(null, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, null);
     if (prevSizes !== nextSizes) {
+      const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
+
       // If resize change handlers have been declared, this is the time to call them.
-      callPanelCallbacks(panelsArray, prevSizes, nextSizes);
+      callPanelCallbacks(panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
       setSizes(nextSizes);
     }
   }, []);
@@ -1167,8 +1172,10 @@ function PanelGroupWithForwardedRef({
     const delta = isLastPanel ? 0 - sizeBeforeCollapse : sizeBeforeCollapse;
     const nextSizes = adjustByDelta(null, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, null);
     if (prevSizes !== nextSizes) {
+      const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
+
       // If resize change handlers have been declared, this is the time to call them.
-      callPanelCallbacks(panelsArray, prevSizes, nextSizes);
+      callPanelCallbacks(panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
       setSizes(nextSizes);
     }
   }, []);
@@ -1201,8 +1208,10 @@ function PanelGroupWithForwardedRef({
     const delta = isLastPanel ? currentSize - nextSize : nextSize - currentSize;
     const nextSizes = adjustByDelta(null, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, null);
     if (prevSizes !== nextSizes) {
+      const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
+
       // If resize change handlers have been declared, this is the time to call them.
-      callPanelCallbacks(panelsArray, prevSizes, nextSizes);
+      callPanelCallbacks(panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
       setSizes(nextSizes);
     }
   }, []);

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

@@ -257,27 +257,29 @@ function adjustByDelta(event, panels, idBefore, idAfter, delta, prevSizes, panel
   nextSizes[index] = baseSizes[index] + deltaApplied;
   return nextSizes;
 }
-function callPanelCallbacks(panelsArray, prevSizes, nextSizes) {
-  nextSizes.forEach((nextSize, index) => {
-    const prevSize = prevSizes[index];
-    if (prevSize !== nextSize) {
-      const {
-        callbacksRef,
-        collapsible
-      } = panelsArray[index].current;
+function callPanelCallbacks(panelsArray, sizes, panelIdToLastNotifiedSizeMap) {
+  sizes.forEach((size, index) => {
+    const {
+      callbacksRef,
+      collapsible,
+      id
+    } = panelsArray[index].current;
+    const lastNotifiedSize = panelIdToLastNotifiedSizeMap[id];
+    if (lastNotifiedSize !== size) {
+      panelIdToLastNotifiedSizeMap[id] = size;
       const {
         onCollapse,
         onResize
       } = callbacksRef.current;
       if (onResize) {
-        onResize(nextSize);
+        onResize(size);
       }
       if (collapsible && onCollapse) {
         // Falsy check handles both previous size of 0
         // and initial size of undefined (when mounting)
-        if (!prevSize && nextSize !== 0) {
+        if (!lastNotifiedSize && size !== 0) {
           onCollapse(false);
-        } else if (prevSize !== 0 && nextSize === 0) {
+        } else if (lastNotifiedSize !== 0 && size === 0) {
           onCollapse(true);
         }
       }
@@ -820,6 +822,7 @@ function PanelGroupWithForwardedRef({
   useEffect(() => {
     callbacksRef.current.onLayout = onLayout;
   });
+  const panelIdToLastNotifiedSizeMapRef = useRef({});
 
   // 0-1 values representing the relative size of each panel.
   const [sizes, setSizes] = useState([]);
@@ -844,6 +847,12 @@ function PanelGroupWithForwardedRef({
     setLayout: sizes => {
       const total = sizes.reduce((accumulated, current) => accumulated + current, 0);
       assert(total === 100, "Panel sizes must add up to 100%");
+      const {
+        panels
+      } = committedValuesRef.current;
+      const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
+      const panelsArray = panelsMapToSortedArray(panels);
+      callPanelCallbacks(panelsArray, sizes, panelIdToLastNotifiedSizeMap);
       setSizes(sizes);
     }
   }), []);
@@ -868,31 +877,23 @@ function PanelGroupWithForwardedRef({
     } = callbacksRef.current;
     if (onLayout) {
       const {
+        panels,
         sizes
       } = committedValuesRef.current;
 
       // Don't commit layout until all panels have registered and re-rendered with their actual sizes.
       if (sizes.length > 0) {
         onLayout(sizes);
-      }
-    }
-  }, [sizes]);
+        const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
 
-  // Notify Panel listeners about their initial sizes and collapsed state after mount.
-  // Subsequent changes will be called by the resizeHandler.
-  const didNotifyCallbacksAfterMountRef = useRef(false);
-  useIsomorphicLayoutEffect(() => {
-    if (didNotifyCallbacksAfterMountRef.current) {
-      return;
-    }
-    const {
-      panels,
-      sizes
-    } = committedValuesRef.current;
-    if (sizes.length > 0) {
-      didNotifyCallbacksAfterMountRef.current = true;
-      const panelsArray = panelsMapToSortedArray(panels);
-      callPanelCallbacks(panelsArray, [], sizes);
+        // When possible, we notify before the next render so that rendering work can be batched together.
+        // Some cases are difficult to detect though,
+        // for example– panels that are conditionally rendered can affect the size of neighboring panels.
+        // In this case, the best we can do is notify on commit.
+        // The callPanelCallbacks() uses its own memoization to avoid notifying panels twice in these cases.
+        const panelsArray = panelsMapToSortedArray(panels);
+        callPanelCallbacks(panelsArray, sizes, panelIdToLastNotifiedSizeMap);
+      }
     }
   }, [sizes]);
 
@@ -1061,8 +1062,10 @@ function PanelGroupWithForwardedRef({
         }
       }
       if (sizesChanged) {
+        const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
+
         // If resize change handlers have been declared, this is the time to call them.
-        callPanelCallbacks(panelsArray, prevSizes, nextSizes);
+        callPanelCallbacks(panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
         setSizes(nextSizes);
       }
       prevDeltaRef.current = delta;
@@ -1107,8 +1110,10 @@ function PanelGroupWithForwardedRef({
     const delta = isLastPanel ? currentSize : 0 - currentSize;
     const nextSizes = adjustByDelta(null, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, null);
     if (prevSizes !== nextSizes) {
+      const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
+
       // If resize change handlers have been declared, this is the time to call them.
-      callPanelCallbacks(panelsArray, prevSizes, nextSizes);
+      callPanelCallbacks(panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
       setSizes(nextSizes);
     }
   }, []);
@@ -1143,8 +1148,10 @@ function PanelGroupWithForwardedRef({
     const delta = isLastPanel ? 0 - sizeBeforeCollapse : sizeBeforeCollapse;
     const nextSizes = adjustByDelta(null, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, null);
     if (prevSizes !== nextSizes) {
+      const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
+
       // If resize change handlers have been declared, this is the time to call them.
-      callPanelCallbacks(panelsArray, prevSizes, nextSizes);
+      callPanelCallbacks(panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
       setSizes(nextSizes);
     }
   }, []);
@@ -1177,8 +1184,10 @@ function PanelGroupWithForwardedRef({
     const delta = isLastPanel ? currentSize - nextSize : nextSize - currentSize;
     const nextSizes = adjustByDelta(null, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, null);
     if (prevSizes !== nextSizes) {
+      const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
+
       // If resize change handlers have been declared, this is the time to call them.
-      callPanelCallbacks(panelsArray, prevSizes, nextSizes);
+      callPanelCallbacks(panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
       setSizes(nextSizes);
     }
   }, []);

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

@@ -257,27 +257,29 @@ function adjustByDelta(event, panels, idBefore, idAfter, delta, prevSizes, panel
   nextSizes[index] = baseSizes[index] + deltaApplied;
   return nextSizes;
 }
-function callPanelCallbacks(panelsArray, prevSizes, nextSizes) {
-  nextSizes.forEach((nextSize, index) => {
-    const prevSize = prevSizes[index];
-    if (prevSize !== nextSize) {
-      const {
-        callbacksRef,
-        collapsible
-      } = panelsArray[index].current;
+function callPanelCallbacks(panelsArray, sizes, panelIdToLastNotifiedSizeMap) {
+  sizes.forEach((size, index) => {
+    const {
+      callbacksRef,
+      collapsible,
+      id
+    } = panelsArray[index].current;
+    const lastNotifiedSize = panelIdToLastNotifiedSizeMap[id];
+    if (lastNotifiedSize !== size) {
+      panelIdToLastNotifiedSizeMap[id] = size;
       const {
         onCollapse,
         onResize
       } = callbacksRef.current;
       if (onResize) {
-        onResize(nextSize);
+        onResize(size);
       }
       if (collapsible && onCollapse) {
         // Falsy check handles both previous size of 0
         // and initial size of undefined (when mounting)
-        if (!prevSize && nextSize !== 0) {
+        if (!lastNotifiedSize && size !== 0) {
           onCollapse(false);
-        } else if (prevSize !== 0 && nextSize === 0) {
+        } else if (lastNotifiedSize !== 0 && size === 0) {
           onCollapse(true);
         }
       }
@@ -813,6 +815,7 @@ function PanelGroupWithForwardedRef({
   useEffect(() => {
     callbacksRef.current.onLayout = onLayout;
   });
+  const panelIdToLastNotifiedSizeMapRef = useRef({});
 
   // 0-1 values representing the relative size of each panel.
   const [sizes, setSizes] = useState([]);
@@ -837,6 +840,12 @@ function PanelGroupWithForwardedRef({
     setLayout: sizes => {
       const total = sizes.reduce((accumulated, current) => accumulated + current, 0);
       assert(total === 100, "Panel sizes must add up to 100%");
+      const {
+        panels
+      } = committedValuesRef.current;
+      const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
+      const panelsArray = panelsMapToSortedArray(panels);
+      callPanelCallbacks(panelsArray, sizes, panelIdToLastNotifiedSizeMap);
       setSizes(sizes);
     }
   }), []);
@@ -861,31 +870,23 @@ function PanelGroupWithForwardedRef({
     } = callbacksRef.current;
     if (onLayout) {
       const {
+        panels,
         sizes
       } = committedValuesRef.current;
 
       // Don't commit layout until all panels have registered and re-rendered with their actual sizes.
       if (sizes.length > 0) {
         onLayout(sizes);
-      }
-    }
-  }, [sizes]);
+        const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
 
-  // Notify Panel listeners about their initial sizes and collapsed state after mount.
-  // Subsequent changes will be called by the resizeHandler.
-  const didNotifyCallbacksAfterMountRef = useRef(false);
-  useIsomorphicLayoutEffect(() => {
-    if (didNotifyCallbacksAfterMountRef.current) {
-      return;
-    }
-    const {
-      panels,
-      sizes
-    } = committedValuesRef.current;
-    if (sizes.length > 0) {
-      didNotifyCallbacksAfterMountRef.current = true;
-      const panelsArray = panelsMapToSortedArray(panels);
-      callPanelCallbacks(panelsArray, [], sizes);
+        // When possible, we notify before the next render so that rendering work can be batched together.
+        // Some cases are difficult to detect though,
+        // for example– panels that are conditionally rendered can affect the size of neighboring panels.
+        // In this case, the best we can do is notify on commit.
+        // The callPanelCallbacks() uses its own memoization to avoid notifying panels twice in these cases.
+        const panelsArray = panelsMapToSortedArray(panels);
+        callPanelCallbacks(panelsArray, sizes, panelIdToLastNotifiedSizeMap);
+      }
     }
   }, [sizes]);
 
@@ -1049,8 +1050,10 @@ function PanelGroupWithForwardedRef({
         }
       }
       if (sizesChanged) {
+        const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
+
         // If resize change handlers have been declared, this is the time to call them.
-        callPanelCallbacks(panelsArray, prevSizes, nextSizes);
+        callPanelCallbacks(panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
         setSizes(nextSizes);
       }
       prevDeltaRef.current = delta;
@@ -1095,8 +1098,10 @@ function PanelGroupWithForwardedRef({
     const delta = isLastPanel ? currentSize : 0 - currentSize;
     const nextSizes = adjustByDelta(null, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, null);
     if (prevSizes !== nextSizes) {
+      const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
+
       // If resize change handlers have been declared, this is the time to call them.
-      callPanelCallbacks(panelsArray, prevSizes, nextSizes);
+      callPanelCallbacks(panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
       setSizes(nextSizes);
     }
   }, []);
@@ -1131,8 +1136,10 @@ function PanelGroupWithForwardedRef({
     const delta = isLastPanel ? 0 - sizeBeforeCollapse : sizeBeforeCollapse;
     const nextSizes = adjustByDelta(null, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, null);
     if (prevSizes !== nextSizes) {
+      const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
+
       // If resize change handlers have been declared, this is the time to call them.
-      callPanelCallbacks(panelsArray, prevSizes, nextSizes);
+      callPanelCallbacks(panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
       setSizes(nextSizes);
     }
   }, []);
@@ -1165,8 +1172,10 @@ function PanelGroupWithForwardedRef({
     const delta = isLastPanel ? currentSize - nextSize : nextSize - currentSize;
     const nextSizes = adjustByDelta(null, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, null);
     if (prevSizes !== nextSizes) {
+      const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
+
       // If resize change handlers have been declared, this is the time to call them.
-      callPanelCallbacks(panelsArray, prevSizes, nextSizes);
+      callPanelCallbacks(panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
       setSizes(nextSizes);
     }
   }, []);

package/package.json

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

package/src/PanelGroup.ts

@@ -169,6 +169,8 @@ function PanelGroupWithForwardedRef({
     callbacksRef.current.onLayout = onLayout;
   });
 
+  const panelIdToLastNotifiedSizeMapRef = useRef<Record<string, number>>({});
+
   // 0-1 values representing the relative size of each panel.
   const [sizes, setSizes] = useState<number[]>([]);
 
@@ -199,6 +201,13 @@ function PanelGroupWithForwardedRef({
 
         assert(total === 100, "Panel sizes must add up to 100%");
 
+        const { panels } = committedValuesRef.current;
+        const panelIdToLastNotifiedSizeMap =
+          panelIdToLastNotifiedSizeMapRef.current;
+        const panelsArray = panelsMapToSortedArray(panels);
+
+        callPanelCallbacks(panelsArray, sizes, panelIdToLastNotifiedSizeMap);
+
         setSizes(sizes);
       },
     }),
@@ -224,29 +233,23 @@ function PanelGroupWithForwardedRef({
   useEffect(() => {
     const { onLayout } = callbacksRef.current!;
     if (onLayout) {
-      const { sizes } = committedValuesRef.current;
+      const { panels, sizes } = committedValuesRef.current;
 
       // Don't commit layout until all panels have registered and re-rendered with their actual sizes.
       if (sizes.length > 0) {
         onLayout(sizes);
-      }
-    }
-  }, [sizes]);
-
-  // Notify Panel listeners about their initial sizes and collapsed state after mount.
-  // Subsequent changes will be called by the resizeHandler.
-  const didNotifyCallbacksAfterMountRef = useRef(false);
-  useIsomorphicLayoutEffect(() => {
-    if (didNotifyCallbacksAfterMountRef.current) {
-      return;
-    }
 
-    const { panels, sizes } = committedValuesRef.current;
-    if (sizes.length > 0) {
-      didNotifyCallbacksAfterMountRef.current = true;
+        const panelIdToLastNotifiedSizeMap =
+          panelIdToLastNotifiedSizeMapRef.current;
 
-      const panelsArray = panelsMapToSortedArray(panels);
-      callPanelCallbacks(panelsArray, [], sizes);
+        // When possible, we notify before the next render so that rendering work can be batched together.
+        // Some cases are difficult to detect though,
+        // for example– panels that are conditionally rendered can affect the size of neighboring panels.
+        // In this case, the best we can do is notify on commit.
+        // The callPanelCallbacks() uses its own memoization to avoid notifying panels twice in these cases.
+        const panelsArray = panelsMapToSortedArray(panels);
+        callPanelCallbacks(panelsArray, sizes, panelIdToLastNotifiedSizeMap);
+      }
     }
   }, [sizes]);
 
@@ -481,8 +484,15 @@ function PanelGroupWithForwardedRef({
         }
 
         if (sizesChanged) {
+          const panelIdToLastNotifiedSizeMap =
+            panelIdToLastNotifiedSizeMapRef.current;
+
           // If resize change handlers have been declared, this is the time to call them.
-          callPanelCallbacks(panelsArray, prevSizes, nextSizes);
+          callPanelCallbacks(
+            panelsArray,
+            nextSizes,
+            panelIdToLastNotifiedSizeMap
+          );
 
           setSizes(nextSizes);
         }
@@ -550,8 +560,11 @@ function PanelGroupWithForwardedRef({
       null
     );
     if (prevSizes !== nextSizes) {
+      const panelIdToLastNotifiedSizeMap =
+        panelIdToLastNotifiedSizeMapRef.current;
+
       // If resize change handlers have been declared, this is the time to call them.
-      callPanelCallbacks(panelsArray, prevSizes, nextSizes);
+      callPanelCallbacks(panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
 
       setSizes(nextSizes);
     }
@@ -603,8 +616,11 @@ function PanelGroupWithForwardedRef({
       null
     );
     if (prevSizes !== nextSizes) {
+      const panelIdToLastNotifiedSizeMap =
+        panelIdToLastNotifiedSizeMapRef.current;
+
       // If resize change handlers have been declared, this is the time to call them.
-      callPanelCallbacks(panelsArray, prevSizes, nextSizes);
+      callPanelCallbacks(panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
 
       setSizes(nextSizes);
     }
@@ -658,8 +674,11 @@ function PanelGroupWithForwardedRef({
       null
     );
     if (prevSizes !== nextSizes) {
+      const panelIdToLastNotifiedSizeMap =
+        panelIdToLastNotifiedSizeMapRef.current;
+
       // If resize change handlers have been declared, this is the time to call them.
-      callPanelCallbacks(panelsArray, prevSizes, nextSizes);
+      callPanelCallbacks(panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
 
       setSizes(nextSizes);
     }

package/src/utils/group.ts

@@ -119,25 +119,28 @@ export function adjustByDelta(
 
 export function callPanelCallbacks(
   panelsArray: PanelData[],
-  prevSizes: number[],
-  nextSizes: number[]
+  sizes: number[],
+  panelIdToLastNotifiedSizeMap: Record<string, number>
 ) {
-  nextSizes.forEach((nextSize, index) => {
-    const prevSize = prevSizes[index];
-    if (prevSize !== nextSize) {
-      const { callbacksRef, collapsible } = panelsArray[index].current;
+  sizes.forEach((size, index) => {
+    const { callbacksRef, collapsible, id } = panelsArray[index].current;
+
+    const lastNotifiedSize = panelIdToLastNotifiedSizeMap[id];
+    if (lastNotifiedSize !== size) {
+      panelIdToLastNotifiedSizeMap[id] = size;
+
       const { onCollapse, onResize } = callbacksRef.current!;
 
       if (onResize) {
-        onResize(nextSize);
+        onResize(size);
       }
 
       if (collapsible && onCollapse) {
         // Falsy check handles both previous size of 0
         // and initial size of undefined (when mounting)
-        if (!prevSize && nextSize !== 0) {
+        if (!lastNotifiedSize && size !== 0) {
           onCollapse(false);
-        } else if (prevSize !== 0 && nextSize === 0) {
+        } else if (lastNotifiedSize !== 0 && size === 0) {
           onCollapse(true);
         }
       }