feat: Only re-render if timing props have changed

Author: PeterC89

packages/webui/src/client/ui/SegmentTimeline/Parts/SegmentTimelinePart.tsx

@@ -314,11 +314,14 @@ export class SegmentTimelinePartClass extends React.Component<Translated<WithTim
 	}
 
 	shouldComponentUpdate(nextProps: Readonly<WithTiming<IProps>>, nextState: Readonly<IState>): boolean {
-		if (!_.isMatch(this.props, nextProps) || !_.isMatch(this.state, nextState)) {
-			return true
-		} else {
-			return false
-		}
+		// Exclude segment object from deep comparison to prevent unnecessary re-renders when only
+		// metadata (identifier, name, userEditOperations, etc.) changes. These don't affect part
+		// positioning or rendering. Only check segment ID to detect segment switches.
+		return (
+			!_.isMatch(_.omit(this.props, 'segment'), _.omit(nextProps, 'segment')) ||
+			this.props.segment._id !== nextProps.segment._id ||
+			!_.isMatch(this.state, nextState)
+		)
 	}
 
 	componentDidUpdate(prevProps: Readonly<Translated<WithTiming<IProps>>>, prevState: IState, snapshot?: unknown): void {

packages/webui/src/client/ui/SegmentTimeline/SegmentTimeline.tsx

@@ -612,7 +612,7 @@ export class SegmentTimelineClass extends React.Component<Translated<WithTiming<
 
 		return {
 			willChange: this.props.isLiveSegment ? 'transform' : 'none',
-			transform: `translate3d(-${scrollLeftPx}px, 0, 0)`,
+			transform: 'translateX(-' + scrollLeftPx + 'px)',
 			height: `calc(${outputGroups.reduce(
 				(mem, group) =>
 					mem +

packages/webui/src/client/ui/SegmentTimeline/SegmentTimelineContainer.tsx

@@ -181,7 +181,15 @@ const SegmentTimelineContainerContent = withResolvedSegment(
 		}
 
 		shouldComponentUpdate(nextProps: IProps & ITrackedResolvedSegmentProps, nextState: IState) {
-			return !_.isMatch(this.props, nextProps) || !_.isMatch(this.state, nextState)
+			// Exclude segment and playlist objects from deep comparison since they frequently contain
+			// metadata changes (identifier, name, etc.) that don't affect rendering or positioning.
+			// Only check their IDs to detect actual segment/playlist switches.
+			return (
+				!_.isMatch(_.omit(this.props, 'segmentui', 'playlist'), _.omit(nextProps, 'segmentui', 'playlist')) ||
+				this.props.segmentui?._id !== nextProps.segmentui?._id ||
+				this.props.playlist?._id !== nextProps.playlist?._id ||
+				!_.isMatch(this.state, nextState)
+			)
 		}
 
 		componentDidMount(): void {