Fix expensive operation in mapStateToProps (#3250)

src/containers/paint-editor-wrapper.jsx

@@ -19,6 +19,11 @@ class PaintEditorWrapper extends React.Component {
     componentDidMount () {
         analytics.pageview('/editors/paint');
     }
+    shouldComponentUpdate (nextProps) {
+        return this.props.imageId !== nextProps.imageId ||
+            this.props.rtl !== nextProps.rtl ||
+            this.props.name !== nextProps.name;
+    }
     handleUpdateName (name) {
         this.props.vm.renameCostume(this.props.selectedCostumeIndex, name);
     }
@@ -40,9 +45,16 @@ class PaintEditorWrapper extends React.Component {
     }
     render () {
         if (!this.props.imageId) return null;
+        const {
+            selectedCostumeIndex,
+            vm,
+            ...componentProps
+        } = this.props;
+
         return (
             <PaintEditor
-                {...this.props}
+                {...componentProps}
+                image={vm.getCostume(selectedCostumeIndex)}
                 onUpdateImage={this.handleUpdateImage}
                 onUpdateName={this.handleUpdateName}
             />
@@ -74,8 +86,8 @@ const mapStateToProps = (state, {selectedCostumeIndex}) => {
         rotationCenterY: costume && costume.rotationCenterY,
         imageFormat: costume && costume.dataFormat,
         imageId: targetId && `${targetId}${costume.skinId}`,
-        image: state.scratchGui.vm.getCostume(index),
         rtl: state.locales.isRtl,
+        selectedCostumeIndex: index,
         vm: state.scratchGui.vm,
         zoomLevelId: targetId
     };