I am trying to insert a text link in calendar.
<DateRangePicker renderCalendarInfo={() => <CustomText />} ...moreProps />
But after user select the date, and the calendar is hided, a warning is thrown
Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
I confirmed it is not caused by my custom react component because event if I render () => <b>HELLO WORLD</b>, the warning is still here
Even If I commented out all lifecycle of my dates container, the warning is still here
Is it a hidden issue of react-dates?
Um, can you share all of the props you are using give a demo app? Do you no longer see the issue if you remove renderCalendarInfo? What version of react-dates/react are you using?
This issue is aging, but I'm seeing the same thing. It's even reproducible for me running react-dates's own storybook locally (i.e. cloning react-dates > npm install > npm run storybook > then going to the "with info panel bottom" story).
However, I do not see the error at http://airbnb.io/react-dates/?path=/story/drp-calendar-props--with-info-panel-bottom. 🤷♂️
The error is not consistent, but is most reproducible when tabbing through the inputs instead of clicking.
The problem appears to be in DayPicker.jsx, line 322 where this.setCalendarInfoWidthTimeout is assigned a timeout. I _think_ what is happening is that timeout is sometimes being duplicated, so it's not being cleared correctly in componentWillUnmount.
Adding clearTimeout(this.setCalendarInfoWidthTimeout); above line 322 resolved the issue for me.
if (this.calendarInfo) {
clearTimeout(this.setCalendarInfoWidthTimeout);
this.setCalendarInfoWidthTimeout = setTimeout(() => {
...
@mstanaland thanks, a PR adding that would be appreciated.
@ljharb My pleasure >> PR #1736
Most helpful comment
This issue is aging, but I'm seeing the same thing. It's even reproducible for me running react-dates's own storybook locally (i.e. cloning react-dates >
npm install>npm run storybook> then going to the "with info panel bottom" story).However, I do not see the error at
http://airbnb.io/react-dates/?path=/story/drp-calendar-props--with-info-panel-bottom. 🤷♂️The error is not consistent, but is most reproducible when tabbing through the inputs instead of clicking.
The problem appears to be in DayPicker.jsx, line 322 where
this.setCalendarInfoWidthTimeoutis assigned a timeout. I _think_ what is happening is that timeout is sometimes being duplicated, so it's not being cleared correctly in componentWillUnmount.Adding
clearTimeout(this.setCalendarInfoWidthTimeout);above line 322 resolved the issue for me.