diff --git a/CHANGELOG.md b/CHANGELOG.md index 75b53640f..e94308085 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # Changelog +## 4.5.4 + +- [638](https://github.com/bvaughn/react-resizable-panels/pull/638): `Panel` avoids unnecessary re-renders in response to mouse-hover state. + ## 4.5.3 - [635](https://github.com/bvaughn/react-resizable-panels/pull/635): Expand pre-collapsed panels if drug past the halfway point for more consistent collapse/expand behavior. diff --git a/lib/components/group/Group.tsx b/lib/components/group/Group.tsx index dd16ce7a0..a96e4a420 100644 --- a/lib/components/group/Group.tsx +++ b/lib/components/group/Group.tsx @@ -233,12 +233,23 @@ export function Group({ } } + let prevInteractionStateActive = false; + const removeInteractionStateChangeListener = eventEmitter.addListener( "interactionStateChange", - () => { - inMemoryValues.panels.forEach((panel) => { - panel.scheduleUpdate(); - }); + (interactionState) => { + const nextInteractionStateActive = interactionState.state === "active"; + if (prevInteractionStateActive !== nextInteractionStateActive) { + prevInteractionStateActive = nextInteractionStateActive; + + // The only reason to schedule a re-render in response to this event type + // is to disable pointer-events within a Panel while a drag is in progress + // (This is done to prevent text from being selected, etc) + // Unnecessary updates should be very fast in this case but we can still avoid them + inMemoryValues.panels.forEach((panel) => { + panel.scheduleUpdate(); + }); + } } ); diff --git a/package.json b/package.json index f2d11d2b7..329332ec5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-resizable-panels", - "version": "4.5.3", + "version": "4.5.4", "type": "module", "author": "Brian Vaughn (https://github.com/bvaughn/)", "contributors": [