[REACT] Tasks not updating in Gantt view if getting constantly updated via props

[kronaemmanuel]

• gantt.taskStore gets the correct data, but it doesn't reflect in the view

Forum post

I am passing data into the react wrapper's project={{ tasks }} prop, but changes to tasks are not always re-rendering the cells with the new value. In my example, it re-renders the first time the task changes but subsequent changes do not update the rows. Here is a public repo with a runnable example: https://github.com/jamesonhill/-bryntum-issue

  const [data, setData] = useState([{ id: 1, name: 'task 1', custom: 'my custom thing'}]);

  useEffect(() => {
    const interval = setInterval(() => {
      console.log('in timer func');
      setData((prev) => [{ id: 1, name: prev[0].name + '1', custom: prev[0].custom + '1' }]);
    }, 2000);

return () => {
  clearInterval(interval);
}
  }, []);

It may seem weird to see this code, however this is a contrived example to emulate updates via websocket. I am seeing the following behavior: 1) Initial load displays tasks correctly 2) Interval function fires, the task is updated, and the row displays the new task values 3) Interval function fires again, task is updated, but row displays the task values from step 2 4) All subsequent interval function runs also do not re-render task with new values

If you inspect the console.log({ data, tasks }), you can see that both variables are being updated with the new task data. But it seems Bryntum store does not "see" the task updates after the first change. Why does it work once but not on subsequent changes?

[jamesonhill]

column.renderer is what's causing the problem. If it returns a string/number, everything works fine. It breaks when the renderer returns JSX.

[matsbryntse]

@jsakalos Can you please check this ^

[kronaemmanuel]

Had a discussion + debugging with @jsakalos and found that this error is because the tasks data is not being set correctly. You can use:

        <BryntumGantt 
          ...
          tasks={data} // This will keep the same Project, and Tasks Store, and will just update the data
        />

Instead of

        <BryntumGantt 
          ...
          project={{ tasks: data }} // This will recreate new Project with every render, not good
        />

@jamesonhill please check if tasks={data} solves the issue in your app, If there's still an issue, please let us know, I'll reopen the ticket

[kronaemmanuel]

Reopening to add warning for user whenever they use such configs in WrapperHelper