diff --git a/dist/react-input-autosize.es.js b/dist/react-input-autosize.es.js
index d97707c..b084301 100644
--- a/dist/react-input-autosize.es.js
+++ b/dist/react-input-autosize.es.js
@@ -246,6 +246,14 @@ var generateId = function generateId() {
 
 var AutosizeInput = function (_Component) {
 	inherits(AutosizeInput, _Component);
+	createClass(AutosizeInput, null, [{
+		key: 'getDerivedStateFromProps',
+		value: function getDerivedStateFromProps(props, state) {
+			var id = props.id;
+
+			return id !== state.prevId ? { inputId: id || generateId(), prevId: id } : null;
+		}
+	}]);
 
 	function AutosizeInput(props) {
 		classCallCheck(this, AutosizeInput);
@@ -269,7 +277,8 @@ var AutosizeInput = function (_Component) {
 
 		_this.state = {
 			inputWidth: props.minWidth,
-			inputId: props.id || generateId()
+			inputId: props.id || generateId(),
+			prevId: props.id
 		};
 		return _this;
 	}
@@ -281,15 +290,6 @@ var AutosizeInput = function (_Component) {
 			this.copyInputStyles();
 			this.updateInputWidth();
 		}
-	}, {
-		key: 'UNSAFE_componentWillReceiveProps',
-		value: function UNSAFE_componentWillReceiveProps(nextProps) {
-			var id = nextProps.id;
-
-			if (id !== this.props.id) {
-				this.setState({ inputId: id || generateId() });
-			}
-		}
 	}, {
 		key: 'componentDidUpdate',
 		value: function componentDidUpdate(prevProps, prevState) {
diff --git a/dist/react-input-autosize.js b/dist/react-input-autosize.js
index 9460b91..2ad4ad4 100644
--- a/dist/react-input-autosize.js
+++ b/dist/react-input-autosize.js
@@ -252,6 +252,14 @@ var generateId = function generateId() {
 
 var AutosizeInput = function (_Component) {
 	inherits(AutosizeInput, _Component);
+	createClass(AutosizeInput, null, [{
+		key: 'getDerivedStateFromProps',
+		value: function getDerivedStateFromProps(props, state) {
+			var id = props.id;
+
+			return id !== state.prevId ? { inputId: id || generateId(), prevId: id } : null;
+		}
+	}]);
 
 	function AutosizeInput(props) {
 		classCallCheck(this, AutosizeInput);
@@ -275,7 +283,8 @@ var AutosizeInput = function (_Component) {
 
 		_this.state = {
 			inputWidth: props.minWidth,
-			inputId: props.id || generateId()
+			inputId: props.id || generateId(),
+			prevId: props.id
 		};
 		return _this;
 	}
@@ -287,15 +296,6 @@ var AutosizeInput = function (_Component) {
 			this.copyInputStyles();
 			this.updateInputWidth();
 		}
-	}, {
-		key: 'UNSAFE_componentWillReceiveProps',
-		value: function UNSAFE_componentWillReceiveProps(nextProps) {
-			var id = nextProps.id;
-
-			if (id !== this.props.id) {
-				this.setState({ inputId: id || generateId() });
-			}
-		}
 	}, {
 		key: 'componentDidUpdate',
 		value: function componentDidUpdate(prevProps, prevState) {
diff --git a/dist/react-input-autosize.min.js b/dist/react-input-autosize.min.js
index 48ff768..d6b48b0 100644
--- a/dist/react-input-autosize.min.js
+++ b/dist/react-input-autosize.min.js
@@ -1 +1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["react","prop-types"],e):t.AutosizeInput=e(t.React,t.PropTypes)}(this,function(t,e){"use strict";var n="default"in t?t.default:t;e=e&&e.hasOwnProperty("default")?e.default:e;!function(){function t(t){this.value=t}function e(e){var n,i;function o(n,i){try{var s=e[n](i),u=s.value;u instanceof t?Promise.resolve(u.value).then(function(t){o("next",t)},function(t){o("throw",t)}):r(s.done?"return":"normal",s.value)}catch(t){r("throw",t)}}function r(t,e){switch(t){case"return":n.resolve({value:e,done:!0});break;case"throw":n.reject(e);break;default:n.resolve({value:e,done:!1})}(n=n.next)?o(n.key,n.arg):i=null}this._invoke=function(t,e){return new Promise(function(r,s){var u={key:t,arg:e,resolve:r,reject:s,next:null};i?i=i.next=u:(n=i=u,o(t,e))})},"function"!=typeof e.return&&(this.return=void 0)}"function"==typeof Symbol&&Symbol.asyncIterator&&(e.prototype[Symbol.asyncIterator]=function(){return this}),e.prototype.next=function(t){return this._invoke("next",t)},e.prototype.throw=function(t){return this._invoke("throw",t)},e.prototype.return=function(t){return this._invoke("return",t)}}();var i=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},o=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),r=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t},s=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e},u={position:"absolute",top:0,left:0,visibility:"hidden",height:0,overflow:"scroll",whiteSpace:"pre"},p=["extraWidth","injectStyles","inputClassName","inputRef","inputStyle","minWidth","onAutosize","placeholderIsMinWidth"],l=function(t,e){e.style.fontSize=t.fontSize,e.style.fontFamily=t.fontFamily,e.style.fontWeight=t.fontWeight,e.style.fontStyle=t.fontStyle,e.style.letterSpacing=t.letterSpacing,e.style.textTransform=t.textTransform},a=!("undefined"==typeof window||!window.navigator)&&/MSIE |Trident\/|Edge\//.test(window.navigator.userAgent),c=function(){return a?"_"+Math.random().toString(36).substr(2,12):void 0},h=function(e){function h(t){i(this,h);var e=s(this,(h.__proto__||Object.getPrototypeOf(h)).call(this,t));return e.inputRef=function(t){e.input=t,"function"==typeof e.props.inputRef&&e.props.inputRef(t)},e.placeHolderSizerRef=function(t){e.placeHolderSizer=t},e.sizerRef=function(t){e.sizer=t},e.state={inputWidth:t.minWidth,inputId:t.id||c()},e}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}(h,t.Component),o(h,[{key:"componentDidMount",value:function(){this.mounted=!0,this.copyInputStyles(),this.updateInputWidth()}},{key:"UNSAFE_componentWillReceiveProps",value:function(t){var e=t.id;e!==this.props.id&&this.setState({inputId:e||c()})}},{key:"componentDidUpdate",value:function(t,e){e.inputWidth!==this.state.inputWidth&&"function"==typeof this.props.onAutosize&&this.props.onAutosize(this.state.inputWidth),this.updateInputWidth()}},{key:"componentWillUnmount",value:function(){this.mounted=!1}},{key:"copyInputStyles",value:function(){if(this.mounted&&window.getComputedStyle){var t=this.input&&window.getComputedStyle(this.input);t&&(l(t,this.sizer),this.placeHolderSizer&&l(t,this.placeHolderSizer))}}},{key:"updateInputWidth",value:function(){if(this.mounted&&this.sizer&&void 0!==this.sizer.scrollWidth){var t=void 0;t=this.props.placeholder&&(!this.props.value||this.props.value&&this.props.placeholderIsMinWidth)?Math.max(this.sizer.scrollWidth,this.placeHolderSizer.scrollWidth)+2:this.sizer.scrollWidth+2,(t+="number"===this.props.type&&void 0===this.props.extraWidth?16:parseInt(this.props.extraWidth)||0)<this.props.minWidth&&(t=this.props.minWidth),t!==this.state.inputWidth&&this.setState({inputWidth:t})}}},{key:"getInput",value:function(){return this.input}},{key:"focus",value:function(){this.input.focus()}},{key:"blur",value:function(){this.input.blur()}},{key:"select",value:function(){this.input.select()}},{key:"renderStyles",value:function(){var t=this.props.injectStyles;return a&&t?n.createElement("style",{dangerouslySetInnerHTML:{__html:"input#"+this.state.inputId+"::-ms-clear {display: none;}"}}):null}},{key:"render",value:function(){var t=[this.props.defaultValue,this.props.value,""].reduce(function(t,e){return null!==t&&void 0!==t?t:e}),e=r({},this.props.style);e.display||(e.display="inline-block");var i=r({boxSizing:"content-box",width:this.state.inputWidth+"px"},this.props.inputStyle),o=function(t,e){var n={};for(var i in t)e.indexOf(i)>=0||Object.prototype.hasOwnProperty.call(t,i)&&(n[i]=t[i]);return n}(this.props,[]);return function(t){p.forEach(function(e){return delete t[e]})}(o),o.className=this.props.inputClassName,o.id=this.state.inputId,o.style=i,n.createElement("div",{className:this.props.className,style:e},this.renderStyles(),n.createElement("input",r({},o,{ref:this.inputRef})),n.createElement("div",{ref:this.sizerRef,style:u},t),this.props.placeholder?n.createElement("div",{ref:this.placeHolderSizerRef,style:u},this.props.placeholder):null)}}]),h}();return h.defaultProps={minWidth:1,injectStyles:!0},h});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["react","prop-types"],e):t.AutosizeInput=e(t.React,t.PropTypes)}(this,function(t,e){"use strict";var n="default"in t?t.default:t;e=e&&e.hasOwnProperty("default")?e.default:e;!function(){function t(t){this.value=t}function e(e){var n,i;function r(n,i){try{var s=e[n](i),u=s.value;u instanceof t?Promise.resolve(u.value).then(function(t){r("next",t)},function(t){r("throw",t)}):o(s.done?"return":"normal",s.value)}catch(t){o("throw",t)}}function o(t,e){switch(t){case"return":n.resolve({value:e,done:!0});break;case"throw":n.reject(e);break;default:n.resolve({value:e,done:!1})}(n=n.next)?r(n.key,n.arg):i=null}this._invoke=function(t,e){return new Promise(function(o,s){var u={key:t,arg:e,resolve:o,reject:s,next:null};i?i=i.next=u:(n=i=u,r(t,e))})},"function"!=typeof e.return&&(this.return=void 0)}"function"==typeof Symbol&&Symbol.asyncIterator&&(e.prototype[Symbol.asyncIterator]=function(){return this}),e.prototype.next=function(t){return this._invoke("next",t)},e.prototype.throw=function(t){return this._invoke("throw",t)},e.prototype.return=function(t){return this._invoke("return",t)}}();var i=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},r=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),o=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t},s=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e},u={position:"absolute",top:0,left:0,visibility:"hidden",height:0,overflow:"scroll",whiteSpace:"pre"},p=["extraWidth","injectStyles","inputClassName","inputRef","inputStyle","minWidth","onAutosize","placeholderIsMinWidth"],l=function(t,e){e.style.fontSize=t.fontSize,e.style.fontFamily=t.fontFamily,e.style.fontWeight=t.fontWeight,e.style.fontStyle=t.fontStyle,e.style.letterSpacing=t.letterSpacing,e.style.textTransform=t.textTransform},a=!("undefined"==typeof window||!window.navigator)&&/MSIE |Trident\/|Edge\//.test(window.navigator.userAgent),c=function(){return a?"_"+Math.random().toString(36).substr(2,12):void 0},f=function(e){function f(t){i(this,f);var e=s(this,(f.__proto__||Object.getPrototypeOf(f)).call(this,t));return e.inputRef=function(t){e.input=t,"function"==typeof e.props.inputRef&&e.props.inputRef(t)},e.placeHolderSizerRef=function(t){e.placeHolderSizer=t},e.sizerRef=function(t){e.sizer=t},e.state={inputWidth:t.minWidth,inputId:t.id||c(),prevId:t.id},e}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}(f,t.Component),r(f,null,[{key:"getDerivedStateFromProps",value:function(t,e){var n=t.id;return n!==e.prevId?{inputId:n||c(),prevId:n}:null}}]),r(f,[{key:"componentDidMount",value:function(){this.mounted=!0,this.copyInputStyles(),this.updateInputWidth()}},{key:"componentDidUpdate",value:function(t,e){e.inputWidth!==this.state.inputWidth&&"function"==typeof this.props.onAutosize&&this.props.onAutosize(this.state.inputWidth),this.updateInputWidth()}},{key:"componentWillUnmount",value:function(){this.mounted=!1}},{key:"copyInputStyles",value:function(){if(this.mounted&&window.getComputedStyle){var t=this.input&&window.getComputedStyle(this.input);t&&(l(t,this.sizer),this.placeHolderSizer&&l(t,this.placeHolderSizer))}}},{key:"updateInputWidth",value:function(){if(this.mounted&&this.sizer&&void 0!==this.sizer.scrollWidth){var t=void 0;t=this.props.placeholder&&(!this.props.value||this.props.value&&this.props.placeholderIsMinWidth)?Math.max(this.sizer.scrollWidth,this.placeHolderSizer.scrollWidth)+2:this.sizer.scrollWidth+2,(t+="number"===this.props.type&&void 0===this.props.extraWidth?16:parseInt(this.props.extraWidth)||0)<this.props.minWidth&&(t=this.props.minWidth),t!==this.state.inputWidth&&this.setState({inputWidth:t})}}},{key:"getInput",value:function(){return this.input}},{key:"focus",value:function(){this.input.focus()}},{key:"blur",value:function(){this.input.blur()}},{key:"select",value:function(){this.input.select()}},{key:"renderStyles",value:function(){var t=this.props.injectStyles;return a&&t?n.createElement("style",{dangerouslySetInnerHTML:{__html:"input#"+this.state.inputId+"::-ms-clear {display: none;}"}}):null}},{key:"render",value:function(){var t=[this.props.defaultValue,this.props.value,""].reduce(function(t,e){return null!==t&&void 0!==t?t:e}),e=o({},this.props.style);e.display||(e.display="inline-block");var i=o({boxSizing:"content-box",width:this.state.inputWidth+"px"},this.props.inputStyle),r=function(t,e){var n={};for(var i in t)e.indexOf(i)>=0||Object.prototype.hasOwnProperty.call(t,i)&&(n[i]=t[i]);return n}(this.props,[]);return function(t){p.forEach(function(e){return delete t[e]})}(r),r.className=this.props.inputClassName,r.id=this.state.inputId,r.style=i,n.createElement("div",{className:this.props.className,style:e},this.renderStyles(),n.createElement("input",o({},r,{ref:this.inputRef})),n.createElement("div",{ref:this.sizerRef,style:u},t),this.props.placeholder?n.createElement("div",{ref:this.placeHolderSizerRef,style:u},this.props.placeholder):null)}}]),f}();return f.defaultProps={minWidth:1,injectStyles:!0},f});
diff --git a/lib/AutosizeInput.js b/lib/AutosizeInput.js
index 0fc5344..cbeba78 100644
--- a/lib/AutosizeInput.js
+++ b/lib/AutosizeInput.js
@@ -65,6 +65,15 @@ var generateId = function generateId() {
 var AutosizeInput = function (_Component) {
 	_inherits(AutosizeInput, _Component);
 
+	_createClass(AutosizeInput, null, [{
+		key: 'getDerivedStateFromProps',
+		value: function getDerivedStateFromProps(props, state) {
+			var id = props.id;
+
+			return id !== state.prevId ? { inputId: id || generateId(), prevId: id } : null;
+		}
+	}]);
+
 	function AutosizeInput(props) {
 		_classCallCheck(this, AutosizeInput);
 
@@ -87,7 +96,8 @@ var AutosizeInput = function (_Component) {
 
 		_this.state = {
 			inputWidth: props.minWidth,
-			inputId: props.id || generateId()
+			inputId: props.id || generateId(),
+			prevId: props.id
 		};
 		return _this;
 	}
@@ -99,15 +109,6 @@ var AutosizeInput = function (_Component) {
 			this.copyInputStyles();
 			this.updateInputWidth();
 		}
-	}, {
-		key: 'UNSAFE_componentWillReceiveProps',
-		value: function UNSAFE_componentWillReceiveProps(nextProps) {
-			var id = nextProps.id;
-
-			if (id !== this.props.id) {
-				this.setState({ inputId: id || generateId() });
-			}
-		}
 	}, {
 		key: 'componentDidUpdate',
 		value: function componentDidUpdate(prevProps, prevState) {
diff --git a/package.json b/package.json
index 6d3e90d..2b8791a 100644
--- a/package.json
+++ b/package.json
@@ -51,7 +51,7 @@
     "webpack-dev-server": "^2.7.1"
   },
   "peerDependencies": {
-    "react": "^0.14.9 || ^15.3.0 || ^16.0 || ^17.0.1"
+    "react": "^16.3.0 || ^17.0.0"
   },
   "scripts": {
     "build": "NODE_ENV=production nps build",
diff --git a/src/AutosizeInput.js b/src/AutosizeInput.js
index f2b1333..81f033a 100644
--- a/src/AutosizeInput.js
+++ b/src/AutosizeInput.js
@@ -45,11 +45,16 @@ const generateId = () => {
 };
 
 class AutosizeInput extends Component {
+	static getDerivedStateFromProps(props, state) {
+		const { id } = props;
+		return id !== state.prevId ? { inputId: id || generateId(), prevId: id } : null;
+	}
 	constructor (props) {
 		super(props);
 		this.state = {
 			inputWidth: props.minWidth,
 			inputId: props.id || generateId(),
+			prevId: props.id,
 		};
 	}
 	componentDidMount () {
@@ -57,12 +62,6 @@ class AutosizeInput extends Component {
 		this.copyInputStyles();
 		this.updateInputWidth();
 	}
-	UNSAFE_componentWillReceiveProps (nextProps) {
-		const { id } = nextProps;
-		if (id !== this.props.id) {
-			this.setState({ inputId: id || generateId() });
-		}
-	}
 	componentDidUpdate (prevProps, prevState) {
 		if (prevState.inputWidth !== this.state.inputWidth) {
 			if (typeof this.props.onAutosize === 'function') {