Use pure render mixin now that we use ImmutableJS

src/layers/background.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { Input } from 'rebass'
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 
 export default class BackgroundLayer extends React.Component {
 	static propTypes = {
@@ -7,6 +8,11 @@ export default class BackgroundLayer extends React.Component {
 		onPaintChanged: React.PropTypes.func.isRequired
 	}
 
+	constructor(props) {
+		super(props);
+		this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
+	}
+
 	onPaintChanged(property, e) {
 		let value = e.target.value
 		if (property == "background-opacity" && !isNaN(parseFloat(value))) {

src/layers/editor.jsx

@@ -12,6 +12,7 @@ import BackgroundLayer from './background.jsx'
 import MdVisibility from 'react-icons/lib/md/visibility'
 import MdVisibilityOff from 'react-icons/lib/md/visibility-off'
 import MdDelete from 'react-icons/lib/md/delete'
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 
 class UnsupportedLayer extends React.Component {
 	render() {
@@ -33,6 +34,7 @@ export class LayerEditor extends React.Component {
 
 	constructor(props) {
 		super(props);
+		this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
 		this.state = {
 			isOpened: false,
 		}

src/layers/fill.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { Checkbox, Input } from 'rebass'
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 
 export default class FillLayer extends React.Component {
 	static propTypes = {
@@ -7,6 +8,11 @@ export default class FillLayer extends React.Component {
     onPaintChanged: React.PropTypes.func.isRequired
   }
 
+	constructor(props) {
+		super(props);
+		this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
+	}
+
 	onPaintChanged(property, e) {
 		let value = e.target.value
 		if (property == "fill-opacity") {

src/layers/list.jsx

@@ -3,6 +3,7 @@ import Immutable from 'immutable'
 import { Heading, Toolbar, NavItem, Space} from 'rebass'
 import { LayerEditor } from './editor.jsx'
 import scrollbars from '../scrollbars.scss'
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 
 // List of collapsible layer editors
 export class LayerList extends React.Component {
@@ -13,6 +14,7 @@ export class LayerList extends React.Component {
 
 	constructor(props) {
 		super(props)
+		this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
 	}
 
 	onLayerDestroyed(deletedLayer) {

src/settings.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import theme from './theme.js'
 import { Heading, Container, Input, Toolbar, NavItem, Space } from 'rebass'
 import Immutable from 'immutable'
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 
 /** Edit global settings within a style such as the name */
 export class SettingsEditor extends React.Component {
@@ -12,6 +13,11 @@ export class SettingsEditor extends React.Component {
 		onAccessTokenChanged: React.PropTypes.func
 	}
 
+	constructor(props) {
+		super(props);
+		this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
+	}
+
 	onChange(property, e) {
 		const changedStyle = this.props.mapStyle.set(property, e.target.value)
 		this.props.onStyleChanged(changedStyle)