"Maximum update depth exceeded" error when resizing in Chrome

Hi, We bought 2 license keys and have been enjoying the Fullcalendar library so far. Our project uses the React version v5.3.1 with the Resource Timeline and Timeline plugins.

However today, we noticed that resizing the window leads to an error Maximum update depth exceeded. This reported bug https://github.com/fullcalendar/fullcalendar/issues/5606 mentioned something very similar and was already fixed in v5.2.0.

Reduced Test Case

Code Sandbox reduced test case.

Bug Description

• using chrome
• increase/decrease the browser window width
• notice the app crashing with a Uncaught Error: Maximum update depth exceeded

Screenshots

Thank you.

[mate-hcp]

@arshaw I can also confirm problem with this (fullcalendar & plugins in newest versions 5.11.0). I was able to debug the code and found this: https://github.com/fullcalendar/fullcalendar-scheduler/blob/master/scrollgrid/src/ClippedScroller.tsx#L93-L97

  componentDidUpdate(prevProps: ClippedScrollerProps) {
    if (!isPropsEqual(prevProps, this.props)) { // an external change?
      this.handleSizing()
    }
  }

This line is doing a lot of re-renders of ClippedScroller component, mostly because isPropsEqual is comparing really big props objects, and it’s returning false even if objects probably should be equal https://github.com/fullcalendar/fullcalendar/blob/master/packages/common/src/util/object.ts#L103-L105

  if (obj0 === obj1) {
    return true
  }

my proposition is to instead comparing whole props, maybe we should compare only those values of those objects which should trigger this.handleSizing()

For example:

componentDidUpdate(prevProps: ClippedScrollerProps) {
  const prevHeight = prevProps.children.props.clientHeight;
  const currentHeight = this.props.children.props.clientHeight;
  const prevWidth = prevProps.children.props.clientWidth;
  const currentWidth = this.props.children.props.clientWidth;

  const isSameHeight = prevHeight === currentHeight;
  const isSameWidth = prevWidth === currentWidth;
  if (!isSameHeight || !isSameWidth) {
    this.handleSizing();
  }
}

this will reduce a lot unnecessary re-renders of ClippedScroller component, and can fix problem with “Maximum update depth exceeded”

[thomasneger]

Hi @arshaw ! Thanks for the workaround idea. I just updated my CodeSandbox example with latest 5.4.0 https://codesandbox.io/s/pedantic-architecture-o43ni?file=/src/App.js and I can still reproduce it on Chrome. Although I will agree, that the windowResizeDelay prop does somehow mitigate the crash.

I can also understand why this is hard to debug and fix.

In our usage of the Fullcalendar library, we extend each rows with our own components using the eventContent hook. We have ~100 rows, maybe more. I hope that even with lots of components to render on screen and your windowResizeDelay will do the trick.

If not, I’ll probably come back in this thread with an updated reduced test case 😃

Thanks a lot and happy hacking ⌨!