react-datepicker: Error Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

App crash with React-datepicker 1.8, React 16.6.3. Console :

react-dom.development.js:57 Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
    at invariant (react-dom.development.js:57)
    at scheduleWork (react-dom.development.js:19364)
    at Object.enqueueSetState (react-dom.development.js:12789)
    at DatePicker.push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:354)
    at DatePicker.componentDidUpdate (index.js:3010)
    at commitLifeCycles (react-dom.development.js:16737)
    at commitAllLifeCycles (react-dom.development.js:18160)
    at HTMLUnknownElement.callCallback (react-dom.development.js:147)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
    at invokeGuardedCallback (react-dom.development.js:250)
    at commitRoot (react-dom.development.js:18365)
    at completeRoot (react-dom.development.js:19894)
    at performWorkOnRoot (react-dom.development.js:19817)
    at performWork (react-dom.development.js:19722)
    at performSyncWork (react-dom.development.js:19696)
    at requestWork (react-dom.development.js:19551)
    at scheduleWork (react-dom.development.js:19358)
    at Object.enqueueSetState (react-dom.development.js:12789)
    at DatePicker.push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:354)
    at DatePicker._this.setOpen (index.js:2551)
    at Object.DatePicker._this.handleCalendarClickOutside [as onClickOutside] (index.js:2625)
    at Calendar._this.handleClickOutside (index.js:1807)
    at onClickOutside._this.__outsideClickHandler (react-onclickoutside.es.js:182)
    at HTMLDocument.handlersMap.(anonymous function) (http://localhost:3000/static/js/4.chunk.js:10985:17)

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 20
Comments: 18

Most upvoted comments

Any updates on this? This bug just cost me 1 hour of my time to figure out, just because react-datepicker doesn’t manage to handle invalid dates without crashing the whole damn react application - absolutely ridiculous.

+28

JackHull on Feb 15, 2019

I got the same issue when I used this.state = { startDate: moment() }; Use moment().valueOf(). This will fix this issue

+15

tishapp on Dec 2, 2018

I see this happening when an invalidate date (new Date(“”)) is passed in to selected. I wonder if that’s the root cause to your issue.

cgat on Nov 30, 2018

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

stale[bot] on May 16, 2020

That helps me:

const { startDate } = this.state;

...

selected={value !== '' ? new Date(startDate) : null}

Krknv on Dec 15, 2018

The issue most likely came from date-fns because this library uses the wrong comparison on invalid date objects. Invalid date returns NaN for days/years/months so all functions that compare if two days of months are equal always return false on an invalid dates objects because NaN != NaN classic rookie mistake.

jcubic on Jan 26, 2023