#146 - Fixed UNSAFE_componentWillReceiveProps

.eslintrc

@@ -35,7 +35,7 @@
     "no-underscore-dangle": "off",
     "no-confusing-arrow": ["error", {"allowParens": true}],
     "no-param-reassign": ["error", { "props": false }],
-    "camelcase": ["error", {properties: "never"}],
+    "camelcase": ["error", {"properties": "never"}],
     "react/forbid-prop-types": "off",
     "react/jsx-uses-vars": "error"
   }

lib/react-rating.cjs.js

@@ -292,21 +292,11 @@ function (_React$PureComponent) {
   }
 
   _createClass(Rating, [{
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      var valueChanged = this.props.value !== nextProps.value;
-      this.setState(function (prevState) {
-        return {
-          displayValue: valueChanged ? nextProps.value : prevState.displayValue
-        };
-      });
-    } // NOTE: This callback is a little bit fragile. Needs some "care" because
+    key: "componentDidUpdate",
+    // NOTE: This callback is a little bit fragile. Needs some "care" because
     // it relies on brittle state kept with different props and state
     // combinations to try to figure out from where we are coming, I mean, what
     // caused this update.
-
-  }, {
-    key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
       // When hover ends, call this.props.onHover with no value.
       if (prevState.interacting && !this.state.interacting) {
@@ -465,6 +455,19 @@ function (_React$PureComponent) {
         onMouseLeave: this.onMouseLeave
       }), symbolNodes);
     }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(nextProps, prevState) {
+      var valueChanged = prevState.displayValue !== nextProps.value;
+
+      if (valueChanged) {
+        return {
+          displayValue: nextProps.value
+        };
+      }
+
+      return null;
+    }
   }]);
 
   return Rating;
@@ -494,13 +497,6 @@ function (_React$PureComponent) {
   }
 
   _createClass(RatingAPILayer, [{
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      this.setState({
-        value: nextProps.initialRating
-      });
-    }
-  }, {
     key: "handleClick",
     value: function handleClick(value, e) {
       var _this2 = this;
@@ -582,6 +578,13 @@ function (_React$PureComponent) {
         onHover: this.handleHover
       });
     }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(nextProps, prevState) {
+      return {
+        value: nextProps.initialRating
+      };
+    }
   }]);
 
   return RatingAPILayer;

lib/react-rating.esm.js

@@ -288,21 +288,11 @@ function (_React$PureComponent) {
   }
 
   _createClass(Rating, [{
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      var valueChanged = this.props.value !== nextProps.value;
-      this.setState(function (prevState) {
-        return {
-          displayValue: valueChanged ? nextProps.value : prevState.displayValue
-        };
-      });
-    } // NOTE: This callback is a little bit fragile. Needs some "care" because
+    key: "componentDidUpdate",
+    // NOTE: This callback is a little bit fragile. Needs some "care" because
     // it relies on brittle state kept with different props and state
     // combinations to try to figure out from where we are coming, I mean, what
     // caused this update.
-
-  }, {
-    key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
       // When hover ends, call this.props.onHover with no value.
       if (prevState.interacting && !this.state.interacting) {
@@ -461,6 +451,19 @@ function (_React$PureComponent) {
         onMouseLeave: this.onMouseLeave
       }), symbolNodes);
     }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(nextProps, prevState) {
+      var valueChanged = prevState.displayValue !== nextProps.value;
+
+      if (valueChanged) {
+        return {
+          displayValue: nextProps.value
+        };
+      }
+
+      return null;
+    }
   }]);
 
   return Rating;
@@ -490,13 +493,6 @@ function (_React$PureComponent) {
   }
 
   _createClass(RatingAPILayer, [{
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      this.setState({
-        value: nextProps.initialRating
-      });
-    }
-  }, {
     key: "handleClick",
     value: function handleClick(value, e) {
       var _this2 = this;
@@ -578,6 +574,13 @@ function (_React$PureComponent) {
         onHover: this.handleHover
       });
     }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(nextProps, prevState) {
+      return {
+        value: nextProps.initialRating
+      };
+    }
   }]);
 
   return RatingAPILayer;