Hanging when underlying props / state changes, and isValidDate returns false

[ashic]

I'm Submitting a ...

[x] Bug report
[ ] Feature request
[ ] Support request

Steps to Reproduce

1. create-react-app
2. add dependencies (moment, react-datetime).
3. Replace App.js with code below:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Datepicker from 'react-datetime'

class App extends Component {

  constructor(args) {
    super(args)

    this.state = {
      enabled: true
    }
  }

  valid(d) { 
    console.log("checking")
    return this.state.enabled;
  }

  clicked = (e) => {
    console.log(e)
    this.setState(ps => ({"enabled": !ps.enabled}))
  }

  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <button onClick={this.clicked}>toggle</button>
        <div>
          <Datepicker isValidDate={x => this.valid(x)} />
        </div>
      </div>
    );
  }
}

export default App;

4. yarn start (or npm equivalent to load the page). The page loads fine, and we see just over 40 log entries.
5. Click the toggle button. It switches the enabled state to false, which makes isValid always return false.
   This will make it got into some loop... very high cpu, and it keeps logging the isValidDate function over and over, until the page crashes. Until the crash, the page becomes unresponsive, and you can either wait for the crash, or use the chrome task manager to kill the tab.
6. Change the code so that "enabled" state is initially disabled. Things load, there are 42 log entries for the validation function. Hit toggle. The calendar becomes enabled. 42 more entries. Things are ok. Then hit toggle again, so "enabled" returns to disabled. It goes into high cpu, and eventually crashes. There are many log entries in the console.

Expected Results

Returning false from the validation function after some props change shouldn't go into some loop and crash the page.

Actual Results

Described above. If a state / prop changes, and the validation function always returns false, the date picker kills the page.

Minimal Reproduction of the Problem

https://github.com/ashic/react-datetime-bug

Other Information (e.g. stacktraces, related issues, suggestions how to fix)

[hosseintalebi]

I am experiencing the same when isValidDate returns false.

[juliancantillo]

It's happening to me also.

[layneanderson]

I suspect this is related to #416 but I haven't had time to investigate. Does this issue exist on 2.9.0?

[juliancantillo]

Yes it is related. Let me check if is reproducible in the 2.9.0.

[layneanderson]

Should be fixed on 2.10.3