React 19: Events not Rendering Properly as in React 18

[aelassas]

On React 18, the following example renders as follow:

On React 19, the same example renders as follow:

As you can see some events are hidden on React 19.

Here is a source repository that replicates the issue: https://github.com/aelassas/react-scheduler-react19-issue

[aldabil21]

I updated the standard example to React 19
https://codesandbox.io/p/sandbox/standard-x24pqk

Can you try there and check it out?

[aelassas]

I tried the latest version (3.0.2) with getRemoteEvents but I got the following error:

provider.tsx:67 Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

The same code works fine in React 18.

Here is the code I am using:

import { Scheduler } from "./lib";
import {
  ProcessedEvent,
} from "./lib/types";

function App() {

  const fetchEvents = async (): Promise<ProcessedEvent[]> => {
    await new Promise((resolve) => setTimeout(resolve, 1000));

    const events = [
      {
        "event_id": "67917d47816e7ebb7bbb72e9",
        "title": "Renault Clio or Similar / Pending",
        "start": new Date("2025-01-24T09:00:00.000Z"),
        "end": new Date("2025-01-27T09:00:00.000Z"),
        "color": "#FBDCC2",
        "textColor": "#EF6C00"
      },
      {
        "event_id": "6791648c7b096b0fabeb316f",
        "title": "Renault Clio or Similar / Pending",
        "start": new Date("2025-01-23T09:00:00.000Z"),
        "end": new Date("2025-01-26T09:00:00.000Z"),
        "color": "#FBDCC2",
        "textColor": "#EF6C00"
      },
      {
        "event_id": "679160c27b096b0fabeb3085",
        "title": "Renault Clio or Similar / Pending",
        "start": new Date("2025-02-02T09:00:00.000Z"),
        "end": new Date("2025-02-08T09:00:00.000Z"),
        "color": "#FBDCC2",
        "textColor": "#EF6C00"
      },
      {
        "event_id": "67915fa57b096b0fabeb2fab",
        "title": "Kia Sportage or Similar / Reserved",
        "start": new Date("2025-01-23T09:00:00.000Z"),
        "end": new Date("2025-01-26T09:00:00.000Z"),
        "color": "#D9E7F4",
        "textColor": "#1E88E5"
      },
      {
        "event_id": "678fc8878abfc31f50504c73",
        "title": "Renault Clio or Similar / Paid",
        "start": new Date("2025-01-22T09:00:00.000Z"),
        "end": new Date("2025-01-25T09:00:00.000Z"),
        "color": "#D1F9D1",
        "textColor": "#77BC23"
      },
      {
        "event_id": "678fc86f8abfc31f50504c3d",
        "title": "Renault Clio or Similar / Pending",
        "start": new Date("2025-01-22T09:00:00.000Z"),
        "end": new Date("2025-01-25T09:00:00.000Z"),
        "color": "#FBDCC2",
        "textColor": "#EF6C00"
      },
      {
        "event_id": "678fc14c8abfc31f50504bce",
        "title": "Renault Clio or Similar / Deposit",
        "start": new Date("2025-01-22T09:00:00.000Z"),
        "end": new Date("2025-01-25T09:00:00.000Z"),
        "color": "#CDECDA",
        "textColor": "#3CB371"
      },
      {
        "event_id": "678fc09a8abfc31f50504b68",
        "title": "Renault Clio or Similar / Paid",
        "start": new Date("2025-01-22T09:00:00.000Z"),
        "end": new Date("2025-01-25T09:00:00.000Z"),
        "color": "#D1F9D1",
        "textColor": "#77BC23"
      },
      {
        "event_id": "678e15918916d1def43fb8d4",
        "title": "Renault Clio or Similar / Paid",
        "start": new Date("2025-01-21T09:00:00.000Z"),
        "end": new Date("2025-01-24T09:00:00.000Z"),
        "color": "#D1F9D1",
        "textColor": "#77BC23"
      },
      {
        "event_id": "678e0ed38916d1def43fb7c4",
        "title": "Renault Clio or Similar / Paid",
        "start": new Date("2025-01-21T09:00:00.000Z"),
        "end": new Date("2025-01-24T09:00:00.000Z"),
        "color": "#D1F9D1",
        "textColor": "#77BC23"
      }
    ];

    return events;
  };

  return (
    <div className='app'>
      <Scheduler
        view="month"
        disableViewer
        editable={false}
        draggable={false}
        agenda={false}
        getRemoteEvents={fetchEvents}
      />
    </div>
  );
}

export default App;

[aldabil21]

Should be resolved on next version after #427 merge

[aelassas]

@aldabil21 Rerenders issue is now fixed but the original issue is still there.

On React 18, the following example renders as follow: https://github.com/aelassas/react-scheduler-react19-issue

On React 19, the same example renders as follow:

As you can see some events are hidden on React 19.

This issue should be reopenned and invistagated.

[aldabil21]

The issue was auto-closed by the PR merge

Will check this