React-dates: renderCalendarInfo cause memory leak

Created on 23 Aug 2018  ·  4Comments  ·  Source: airbnb/react-dates

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?

bug pull request wanted

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.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(() => {
    ...

All 4 comments

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

Was this page helpful?
0 / 5 - 0 ratings

Related issues

asulaiman picture asulaiman  ·  28Comments

igorescobar picture igorescobar  ·  25Comments

thinhdd88 picture thinhdd88  ·  22Comments

nkint picture nkint  ·  21Comments

ckeeney picture ckeeney  ·  22Comments