[REACT] migration 5.0.1

[turina]

Dear support,

After migrating to v5.0.1 I have a warning about my eventRenderer.
my renderer depends on user's settings. The user can switch 4 booleans: showErrors,showWarnings,showModifications,isChartTime.
The rendering depends on these booleans. For instance, showErrors will include error icon+ red border when an event is on error etc.... (see screenshot)
So far, everything is working properly except that the warning is displayed:
I use a callback with the 4 booleans.

    const eventRenderer = useCallback(
        ({ renderData, eventRecord }) => {
            return renderScheduler(
                renderData,
                eventRecord,
                showModifications,
                showErrors,
                showWarnings,
                isChartTime
            );
        },
        [showModifications, showErrors, showWarnings, isChartTime]
    );

then I declare the renderer in the scheduler:

                    eventRenderer={eventRenderer}

I wanted your advise on what is the best way to deal with that requirement and how I could remove the warning. Thanks,
Aurélien

[mats]

I don't see any warning, can you please attach the full message?

[turina]

Sorry I forgot the warning...

bryntum-warning.png (13.43 KiB) Viewed 718 times

[saki]

Your useCallback has the dependency array of [showModifications, showErrors, showWarnings, isChartTime] so the eventRenderer is re-generated whenever any of the members of the dependency array changes.

Cannot you define the renderer outside of the React component function and make necessary decisions within the renderer?

[turina]

Thanks for your reply.
these 4 booleans [showModifications, showErrors, showWarnings, isChartTime] are handled either by react local state (useState) or by redux as they are editable through the toolbar (see screenshot). The core renderer method is defined outside the component with the method "renderScheduler" (a pure javascript function outside the component) which contains all the complex logic. I used the callback just to "bind" my renderer with these booleans. As all the combination of these 4 bool are not so big, I'm thinking this is an acceptable solution. But with the warning, I'm wondering if there is a better way to do this or if it is a kind a false positive that I shoudn't take into account. More generally my question is the following: what is the best way to deal with a custom event renderer that depends on editable data handled outside the scheduler events like redux or state data.

[saki]

custom event renderer that depends on editable data handled outside the scheduler events like redux or state data.

The way would be to have one renderer function that would not change during the lifetime because renderer is a "config-only" option. I suppose that renderer can access the state data, correct?

Another option would be to the approach implemented in this demo: https://bryntum.com/examples/scheduler/frameworks/react/javascript/drag-onto-tasks/build/ where we utilize extraData to pass values down to the instance of the scheduler.

Should you still have troubles, post please a runnable code that we could use as a starting point and adjust it to demonstrate a way to do it.

[turina]

Sorry for the very late reply. I did a small project that reproduce the issue. Let me know if there is a better way to implement the behaviour or if I should just ignore the warning. Thanks!

[saki]

The solution would be to pass fake through extraData. This is your modified Scheduler.jsx:

import React, { useRef, useState, useCallback } from "react";
import { BryntumScheduler } from "@bryntum/scheduler-react";
import "@bryntum/scheduler/scheduler.material.css";
import { BryntumButton } from "@bryntum/scheduler-react";
import { events, resources } from "./data.js";

const columns = [
  {
    field: "flightLine",
  },
  {
    field: "aircraftType",
  },
];
const schedulerConfig = {
  startDate: new Date(2017, 1, 7),
  endDate: new Date(2017, 1, 8),

  viewPreset: "hourAndDay",
  zoomKeepsOriginalTimespan: true,
  autoAdjustTimeAxis: false,
  columns: columns,
};
const Scheduler = () => {
  const schedulerRef = useRef(null);
  const [fake, setFake] = useState(true);
  const changeRenderer = () => {
    setFake(!fake);
    schedulerRef.current.instance.refreshRows();
  };
  const eventRenderer = useCallback(({eventRecord}) => {
    const fake = schedulerRef.current.instance.extraData.fake;
    return eventRecord.name + (fake ? "ON" : "OFF");
  },[]);

  return (
    <div className="main-container">
      <BryntumButton text="custom rendered issue" onClick={changeRenderer} />
      <div>MY FAKE {fake ? "true" : "false"}</div>
      {
        <BryntumScheduler
          {...schedulerConfig}
          resources={resources}
          events={events}
          className="bryntum-full-screen"
          eventRenderer={eventRenderer}
          ref={schedulerRef}
          extraData={{fake}}
        />
      }
    </div>
  );
};
export default Scheduler;