External validation misrender

example/App.js

@@ -4,6 +4,7 @@ import {Customizable} from './Customizable';
 import {UndoRedo} from './UndoRedo';
 import {Textarea} from './Textarea';
 import {Ref} from './Ref';
+import {MinMax} from './MinMax';
 import {DefaultValue} from './DefaultValue';
 
 
@@ -40,6 +41,12 @@ export function App() {
         <h2>Example 6. Create with default value</h2>
         <DefaultValue />
       </section>
+
+      <section className="section">
+        <h2>Example 7. With External Validation</h2>
+        <MinMax />
+        <p>Accepts values between 10 and 100</p>
+      </section>
     </div>
   );
 }

example/MinMax.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import {DebounceInput} from '../src';
+
+
+export class MinMax extends React.Component {
+  state = {
+    value: null
+  };
+
+  render() {
+    const {value} = this.state;
+
+    const min = 10;
+    const max = 100;
+
+    const handleChange = e => {
+      let newValue = Number(e.target.value);
+      if (newValue === 0) {
+        newValue = null;
+      } else if (newValue < min) {
+        newValue = min;
+      } else if (newValue > max) {
+        newValue = max;
+      }
+      this.setState({value: newValue});
+    };
+
+    return (
+      <div>
+        <div className="config">
+          <DebounceInput
+            className="input"
+            type="number"
+            min={min}
+            max={max}
+            value={value}
+            debounceTimeout={500}
+            onChange={handleChange} />
+          <p>Value: {JSON.stringify(value)}</p>
+        </div>
+      </div>
+    );
+  }
+}

src/Component.js

@@ -53,10 +53,10 @@ export class DebounceInput extends React.PureComponent {
     }
     const {value, debounceTimeout} = this.props;
 
-    const {debounceTimeout: oldTimeout, value: oldValue} = prevProps;
+    const {debounceTimeout: oldTimeout} = prevProps;
     const {value: stateValue} = this.state;
 
-    if (typeof value !== 'undefined' && oldValue !== value && stateValue !== value) {
+    if (typeof value !== 'undefined' && stateValue !== value) {
       // Update state.value if new value passed via props, yep re-render should happen
       // eslint-disable-next-line react/no-did-update-set-state
       this.setState({value});
@@ -78,8 +78,9 @@ export class DebounceInput extends React.PureComponent {
     event.persist();
 
     const {value: oldValue} = this.state;
-    const {minLength} = this.props;
+    const {debounceTimeout, minLength} = this.props;
 
+    if (debounceTimeout > 0) this.isDebouncing = true;
     this.setState({value: event.target.value}, () => {
       const {value} = this.state;
 
@@ -132,7 +133,6 @@ export class DebounceInput extends React.PureComponent {
       }, debounceTimeout);
 
       this.notify = event => {
-        this.isDebouncing = true;
         debouncedChangeFunc(event);
       };