Premium support for our pure JavaScript UI components


Post by 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

Post by 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


Post by 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


Post by 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 2 times

Best regards,
Tasnim


Post by 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


Post by alex.l »

Hi,

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

All the best,
Alex


Post by 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


Post by 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


Post Reply