Maximum update depth exceed with dynamic events and validRange

Bug Reports

If I use datesSet, events and validRange in tandem, I’m getting React’s “Maximum update depth exceeded error”. It works fine without the validRange option. Here’s a minimal example:

https://codesandbox.io/s/react-fullcalendar-maximum-update-depth-exceeded-rtto4?file=/src/Calendar.js

What am I doing wrong? Thanks for any hints!

[soulchild]

I tried that as well. Updated example:

https://codesandbox.io/s/react-fullcalendar-maximum-update-depth-exceeded-rtto4?file=/src/Calendar.js

In my real-world application I need to asynchronously fetch events in the events function and returning a Promise from it (or using the success/error callback) generates another loop where the events function is called indefinitely. This time without the React error, but if you look at the console output, you’ll see that it logs continously.

[saneq148]

Make sure that your valid range object is the same at each render I took it outside of component, it stopped rerender each time

const calendarRange = {
  dateFrom: startMonth,
  dateTo: endMonth,
};
const Calendar = () => {

  return (
    <div>
      <div>
        <FullCalendar
          plugins={[dayGridPlugin, listPlugin]}
          initialView="dayGridWeek"
          headerToolbar={{
            left: "prev,next",
            center: "title",
            right: "dayGridMonth,dayGridWeek,dayGridDay,listWeek",
          }}
          events={events}
          datesSet={onDatesSet}
          eventClick={onEventClick}
          validRange={validRange}
          displayEventTime={false}
        />
      </div>
    </div>
  );
};

export default Calendar;