[REACT] custom eventRenderer which return JSX, cause a significant delay in rendering events

[danielrubak]

When using a custom eventRenderer that returns JSX, there is a significant delay in rendering events when scrolling, compared to when it returns a string. Additionally, multiple warnings appear in the console:

Warning: flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering. Consider moving this call to a scheduler task or micro task.

I want to attach a minimal reproducible example to this post, but there is an error when attaching it:

HTTP Error.

and in console:

Failed to load resource: net::ERR_CONNECTION_TIMED_OUT

[ghulam.ghous]

Hi Daniel,

Thanks for reporting this. Have you faced the error while attaching a zip? Uploading a zip is working fine on our end. If you still facing the issue, please upload it to google drive and share the link here. and please make sure to provide the access to everyone with the link.

Regards,
Ghous

[danielrubak]

Yes, I am facing an error when attaching a zip file. Here is the link to the zip file on Google Drive:

https://drive.google.com/file/d/11ZrXKmCSGBRBY48i3XI2hAZz8DeduhhX/view?usp=sharing

[tasnim]

Hey danielrubak,

Instead of using resourceId in eventRecord, you should use assignments which should solve you're issue

const assignments = []

function generateEntries() {
  var entries = [];
  var currentDate = new Date("2023-01-01T00:00:00");
  var endDate = new Date("2023-12-31T23:59:59");

  for (var i = 1; i <= 7000; i++) {
    var resourceId = "r" + ((i % 35) + 1);
    var randomHours = Math.floor(Math.random() * 200) + 2;
    var randomMinutes = Math.floor(Math.random() * 60) + 2;

var startDateTime = new Date(currentDate);
startDateTime.setHours(
  startDateTime.getHours() + randomHours,
  startDateTime.getMinutes() + randomMinutes
);

var endDateTime = new Date(startDateTime);
endDateTime.setHours(endDateTime.getHours() + randomHours);
var lastEvent = entries.findLast(
  (entry) => entry.resourceId === resourceId
);
if (lastEvent) {
  startDateTime = new Date(lastEvent.endDate);
  endDateTime = new Date(startDateTime);
  endDateTime.setHours(endDateTime.getHours() + randomHours);
  if (endDateTime.getTime() <= startDateTime.getTime()) {
    console.log(lastEvent, i);
  }
}

entries.push(
  generateEntry(
    i,
    resourceId,
    startDateTime.toISOString().slice(0, 16).replace("T", " "),
    endDateTime.toISOString().slice(0, 16).replace("T", " "),
    "Event " + i,
    "b-fa b-fa-" + (i % 5 === 0 ? "calendar" : "atom"),
    Math.floor(Math.random() * 101)
  )
);

assignments.push({ id : assignments.length + 1, eventId : i, resourceId });
  }

  return entries;
}

// then use it inside the JSX
      <BryntumSchedulerPro
        resourceTimeRanges={generatedTimeRanges}
        resourceTimeRangesFeature={true}
        events={generatedEvents}
        resources={resources}
        assignments={assignments}
        {...schedulerConfig}
      />

Docs https://bryntum.com/products/schedulerpro/docs/api/SchedulerPro/view/SchedulerPro#config-assignments

Please check the video below showing it works smoothly after using assignments

msedge_BySqWHWr1M.mp4

(3.87 MiB) Downloaded 7 times

Best regards,
Tasnim

[danielrubak]

This solved the warnings, but there's still a significant delay when returning JSX in the custom eventRenderer compared to a string. The rendering time is about fifteen times longer with JSX.

I've attached a link to a folder with videos that show the performance difference.

https://drive.google.com/drive/folders/1q1t9shUjLXoJTKVHoXgAGNJLTnyzWW2b?usp=sharing

[alex.l]

Hi,

Could you please test performance in prod mode? Will it still be slow for you?

[danielrubak]

Hi,

I tested it in production mode, and there's still a huge difference in rendering times between JSX and string for the custom eventRenderer. I've added to google drive folder videos with performance in prod mode:

https://drive.google.com/drive/folders/1q1t9shUjLXoJTKVHoXgAGNJLTnyzWW2b?usp=sharing

[kronaemmanuel]

Hi Daniel,

Thanks for the report, the performance issue is definitely there. I'm opening an issue to investigate it further: https://github.com/bryntum/support/issues/9370. For now, you can try to use regular renderer. In most cases, using renderer is sufficient. https://bryntum.com/products/schedulerpro/docs/api/SchedulerPro/view/SchedulerPro#config-eventRenderer

Best regards,
Krona

[odiyaerlichster]

Hi,
We are also experiencing the same performance decrease that Daniel stated, when using JSX in eventRendered as opposed to a string there is a major decrease in performance.
Additionally, we are still seeing the flushSync warning, we are using assignments and not resourceId.
I see there is an issue open to investigate this, is there an ETA on when this will be resolved?

[marcio]

Hey Odiya,

Thanks for reaching out.

Unfortunately, there is no updates, but I let our team know if we can improve the priority of that ticket to identify and provide details of what could be done to not have that performance issue.