SplitPane: refactor to avoid unecessary renders

src/components/SplitPane.jsx

@@ -2,42 +2,40 @@ import { h, Component } from 'preact';
 import Split from 'split.js';
 
 export class SplitPane extends Component {
-	// shouldComponentUpdate(nextProps, nextState) {
-	// 	return (
-	// 		nextProps.direction !== this.props.direction ||
-	// 		nextProps.sizes.join('') !== this.props.sizes.join('')
-	// 	);
-	// }
 	componentDidMount() {
 		this.updateSplit();
 	}
-	componentWillUpdate() {
+
-		if (this.splitInstance) {
+	componentDidUpdate(prevProps) {
-			this.splitInstance.destroy();
+		if (this.hasGutter() && !this.hasPropsChanged(prevProps, this.props)) {
+			return;
 		}
-	}
-	componentDidUpdate() {
 		this.updateSplit();
 	}
-	updateSplit() {
+	hasGutter() {
-		const options = {
+		return (
-			direction: this.props.direction,
+			[...this.parent.children].indexOf(
-			minSize: this.props.minSize,
+				this.parent.querySelector('.gutter')
-			gutterSize: 6,
+			) !== -1
-			sizes: this.props.sizes
+		);
-		};
-		if (this.props.onDragEnd) {
-			options.onDragEnd = this.props.onDragEnd;
 	}
-		if (this.props.onDragStart) {
+	hasPropsChanged(a, b) {
-			options.onDragStart = this.props.onDragStart;
+		return (
+			a.direction !== b.direction ||
+			(a.sizes && b.sizes && a.sizes.join('') !== b.sizes.join(''))
+		);
+	}
+	updateSplit() {
+		const { children, ...options } = this.props;
+		options.gutterSize = 6;
+
+		if (this.splitInstance && this.hasGutter()) {
+			this.splitInstance.destroy();
 		}
 
 		/* eslint-disable new-cap */
-		this.splitInstance = Split(
+		this.splitInstance = Split([...this.parent.children], options);
-			this.props.children.map(node => '#' + node.attributes.id),
+
-			options
-		);
 		/* eslint-enable new-cap */
 
 		if (this.props.onSplit) {
@@ -49,6 +47,10 @@ export class SplitPane extends Component {
 		const { children, ...props } = this.props;
 		/* eslint-enable no-unused-vars */
 
-		return <div {...props}>{this.props.children}</div>;
+		return (
+			<div ref={el => (this.parent = el)} {...props}>
+				{this.props.children}
+			</div>
+		);
 	}
 }