Moving frequently-updated props into relevant components (now connect-ed) to reduce full re-renders

src/js/App.js

@@ -180,7 +180,7 @@ export class App extends React.Component{
 		if (this.props.wide_scrollbar_enabled){
 			className += ' wide-scrollbar';
 		}
-		if (this.props.dragger && this.props.dragger.active){
+		if (this.props.dragging){
 			className += ' dragging';
 		}
 		if (this.props.sidebar_open){
@@ -274,28 +274,10 @@ export class App extends React.Component{
 					uiActions={this.props.uiActions}
 					slim_mode={this.props.slim_mode}
 				/>
-				{this.props.hotkeys_enabled && <Hotkeys 
-					mopidyActions={this.props.mopidyActions}
-					uiActions={this.props.uiActions}
-					volume={this.props.volume}
-					mute={this.props.mute}
-					play_state={this.props.play_state}
-					play_time_position={this.props.play_time_position}
-					history={this.props.history}
-					dragging={this.props.dragger && this.props.dragger.dragging}
-				/>} 
+				{this.props.hotkeys_enabled && <Hotkeys />} 
 		        <ContextMenu />
 		        <Dragger />
-		        <Notifications 
-		        	uiActions={this.props.uiActions} 
-		        	spotifyActions={this.props.spotifyActions} 
-		        	geniusActions={this.props.geniusActions} 
-		        	lastfmActions={this.props.lastfmActions} 
-		        	snapcastActions={this.props.snapcastActions} 
-		        	notifications={this.props.notifications} 
-		        	processes={this.props.processes}
-		        	broadcasts={this.props.broadcasts}
-		        />
+		        <Notifications />
 
 		        {this.props.debug_info ? <DebugInfo /> : null}
 
@@ -314,18 +296,10 @@ const mapStateToProps = (state, ownProps) => {
 		touch_dragging: state.ui.touch_dragging,
 		initial_setup_complete: state.ui.initial_setup_complete,
 		slim_mode: state.ui.slim_mode,
-		broadcasts: (state.ui.broadcasts ? state.ui.broadcasts : []),
-		volume: (state.mopidy.volume ? state.mopidy.volume : false),
-		notifications: (state.ui.notifications ? state.ui.notifications : []),
-		processes: (state.ui.processes ? state.ui.processes : {}),
-		load_queue: (state.ui.load_queue ? state.ui.load_queue : {}),
 		mopidy_connected: state.mopidy.connected,
 		spotify_authorized: state.spotify.authorization,
-		play_state: state.mopidy.play_state,
-		play_time_position: parseInt(state.mopidy.time_position),
-		mute: state.mopidy.mute,
 		sidebar_open: state.ui.sidebar_open,
-		dragger: state.ui.dragger,
+		dragging: (state.ui.dragger && state.ui.dragger.active),
 		context_menu: state.ui.context_menu,
 		debug_info: state.ui.debug_info
 	}

src/js/components/Hotkeys.js

@@ -1,6 +1,11 @@
 import React from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
 
-export default class Hotkeys extends React.Component {
+import * as uiActions from '../services/ui/actions';
+import * as mopidyActions from '../services/mopidy/actions';
+
+class Hotkeys extends React.Component {
     
 	constructor(props){
 		super(props);
@@ -162,4 +167,23 @@ export default class Hotkeys extends React.Component {
     render(){
         return null;
     }
-}
+}
+
+const mapStateToProps = (state, ownProps) => {
+	return {
+		volume: (state.mopidy.volume ? state.mopidy.volume : false),
+		mute: state.mopidy.mute,
+		play_state: state.mopidy.play_state,
+		play_time_position: parseInt(state.mopidy.time_position),
+        dragging: state.ui.dragger && state.ui.dragger.dragging,
+	};
+}
+
+const mapDispatchToProps = (dispatch) => {
+	return {
+		uiActions: bindActionCreators(uiActions, dispatch),
+		mopidyActions: bindActionCreators(mopidyActions, dispatch),
+	}
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Hotkeys)

src/js/components/Notifications.js

@@ -1,10 +1,17 @@
 
 import React from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import * as uiActions from '../services/ui/actions';
+import * as spotifyActions from '../services/spotify/actions';
+import * as lastfmActions from '../services/lastfm/actions';
+import * as geniusActions from '../services/genius/actions';
+import * as snapcastActions from '../services/snapcast/actions';
 
-import Link from './Link';
 import Icon from './Icon';
 
-export default class Notifications extends React.Component{
+class Notifications extends React.Component{
 
 	constructor(props){
 		super(props)
@@ -192,4 +199,24 @@ export default class Notifications extends React.Component{
 			</div>
 		)
 	}
-}
+}
+
+const mapStateToProps = (state, ownProps) => {
+	return {
+		broadcasts: (state.ui.broadcasts ? state.ui.broadcasts : []),
+		notifications: (state.ui.notifications ? state.ui.notifications : []),
+		processes: (state.ui.processes ? state.ui.processes : {}),
+	};
+}
+
+const mapDispatchToProps = (dispatch) => {
+	return {
+		uiActions: bindActionCreators(uiActions, dispatch),
+		spotifyActions: bindActionCreators(spotifyActions, dispatch),
+		geniusActions: bindActionCreators(geniusActions, dispatch),
+		lastfmActions: bindActionCreators(lastfmActions, dispatch),
+		snapcastActions: bindActionCreators(snapcastActions, dispatch),
+	}
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Notifications)

src/js/views/Queue.js

@@ -46,6 +46,14 @@ class Queue extends React.Component {
 		this.props.uiActions.setWindowTitle("Now playing");
 	}
 
+	componentWillReceiveProps(nextProps) {
+		console.log(nextProps);
+	}
+
+	shouldComponentUpdate(nextProps) {
+		return (nextProps !== this.props);
+	}
+
 	loadMore(){
 		var new_limit = this.state.limit + this.state.per_page;