Removed componentWillUpdate

src/components/fields/_ZoomProperty.jsx

@@ -13,6 +13,30 @@ import docUid from '../../libs/document-uid'
 import sortNumerically from '../../libs/sort-numerically'
 
 
+/**
+ * We cache a reference for each stop by its index.
+ *
+ * When the stops are reordered the references are also updated (see this.orderStops) this allows React to use the same key for the element and keep keyboard focus.
+ */
+function setStopRefs(props, state) {
+  // This is initialsed below only if required to improved performance.
+  let newRefs;
+
+  if(props.value && props.value.stops) {
+    props.value.stops.forEach((val, idx) => {
+      if(!state.refs.hasOwnProperty(idx)) {
+        if(!newRefs) {
+          newRefs = {...state};
+        }
+        newRefs[idx] = docUid("stop-");
+      }
+    })
+  }
+
+  return newRefs;
+}
+
+
 export default class ZoomProperty extends React.Component {
   static propTypes = {
     onChange: PropTypes.func,
@@ -39,39 +63,16 @@ export default class ZoomProperty extends React.Component {
 
   componentDidMount() {
     this.setState({
-      refs: this.setStopRefs(this.props)
+      refs: setStopRefs(this.props, this.state)
     })
   }
 
-  /**
+  static getDerivedStateFromProps(nextProps) {
-   * We cache a reference for each stop by its index.
+    const newRefs = setStopRefs(props, state);
-   *
-   * When the stops are reordered the references are also updated (see this.orderStops) this allows React to use the same key for the element and keep keyboard focus.
-   */
-  setStopRefs(props) {
-    // This is initialsed below only if required to improved performance.
-    let newRefs;
-
-    if(props.value && props.value.stops) {
-      props.value.stops.forEach((val, idx) => {
-        if(!this.state.refs.hasOwnProperty(idx)) {
-          if(!newRefs) {
-            newRefs = {...this.state.refs};
-          }
-          newRefs[idx] = docUid("stop-");
-        }
-      })
-    }
-
-    return newRefs;
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const newRefs = this.setStopRefs(nextProps);
     if(newRefs) {
-      this.setState({
+      return {
         refs: newRefs
-      })
+      };
     }
   }
 

src/components/inputs/NumberInput.jsx

@@ -17,8 +17,10 @@ class NumberInput extends React.Component {
     }
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  static getDerivedStateFromProps(props, state) {
-    this.setState({ value: nextProps.value })
+    return {
+      value: props.value
+    };
   }
 
   changeValue(newValue) {

src/components/inputs/StringInput.jsx

@@ -18,8 +18,10 @@ class StringInput extends React.Component {
     }
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  static getDerivedStateFromProps(props, state) {
-    this.setState({ value: nextProps.value || '' })
+    return {
+      value: props.value || ''
+    };
   }
 
   render() {

src/components/layers/JSONEditor.jsx

@@ -29,10 +29,10 @@ class JSONEditor extends React.Component {
     }
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  static getDerivedStateFromProps(props, state) {
-    this.setState({
+    return {
-      code: JSON.stringify(nextProps.layer, null, 2)
+      code: JSON.stringify(props.layer, null, 2)
-    })
+    };
   }
 
   shouldComponentUpdate(nextProps, nextState) {

src/components/layers/LayerEditor.jsx

@@ -79,18 +79,18 @@ export default class LayerEditor extends React.Component {
     this.state = { editorGroups }
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  static getDerivedStateFromProps(props, state) {
-    const additionalGroups = { ...this.state.editorGroups }
+    const additionalGroups = { ...state.editorGroups }
 
-    layout[nextProps.layer.type].groups.forEach(group => {
+    layout[props.layer.type].groups.forEach(group => {
       if(!(group.title in additionalGroups)) {
         additionalGroups[group.title] = true
       }
     })
 
-    this.setState({
+    return {
       editorGroups: additionalGroups
-    })
+    };
   }
 
   getChildContext () {

src/components/map/OpenLayers3Map.jsx

@@ -29,10 +29,10 @@ class OpenLayers3Map extends React.Component {
     const styleFunc = olms.apply(this.map, newMapStyle)
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  componentDidUpdate() {
     require.ensure(["ol", "ol-mapbox-style"], () => {
       if(!this.map) return
-      this.updateStyle(nextProps.mapStyle)
+      this.updateStyle(this.props.mapStyle)
     })
   }
 

src/components/modals/ExportModal.jsx

@@ -31,11 +31,10 @@ class Gist extends React.Component {
     }
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  static getDerivedStateFromProps(props, state) {
-    this.setState({
+    return {
-      ...this.state,
+      preview: !!(props.mapStyle.metadata || {})['maputnik:openmaptiles_access_token']
-      preview: !!(nextProps.mapStyle.metadata || {})['maputnik:openmaptiles_access_token']
+    };
-    })
   }
 
   onSave() {