а

Grid width not rendering correctly


#1

Hi,

I found a odd behavior on the grid width when switching from show_chart = false to show_chart = true.

Please get a copy of the sample from my GitHub.

Once the application has started, click on Show and you will immediately notice the lag in width of the grid.
However, if you click on the Show to hide the chart and show again, the lag is gone but there is still a subtle width “jumping” issue.

Any idea what is the issue?

Thanks!


#2

Hi @Joseph!

I’m looking into this. I don’t have any solution yet, will need some time to debug your sample and find out why grid sizes behave that way


#3

Hi @guldmi,

Appreciate that. Let me know if you need anything else to assist you with.

I’ll update here if I manage to find anything new as well.

It’s affecting our UI now, so if I need to file a ticket for quicker response, do let me know.

Thank you!


#4

Hi, @Joseph!

I think you need to pass a display prop from React.memo defined here https://github.com/josephstgh/react-gantt-hook-demo/blob/27fe9f10edf91ae57ab3e7ca60efc78c1a0d3de0/src/GanttChart.js#L19
to the second argument of useEffect at this line https://github.com/josephstgh/react-gantt-hook-demo/blob/27fe9f10edf91ae57ab3e7ca60efc78c1a0d3de0/src/GanttChart.js#L92

}, [display]);

Not using it caused redundant re-initializations and repaints of Gantt (explained here https://reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect ), which I think was responsible for jumping grid width.
After I change it, the Gantt is re-initialized only when the display changes and only the problem seems gone.


#5

Hi @guldmi,

Thanks for the pointer. I just tried it, and it seem to have fixed the issue but doesn’t make much sense to me though.

That is the reason why I put it as [] which only initialize when the component mount and unmount which means that gantt on paint once when the component is mounted. And if you look further below, I have another effect which has [display] as the dependency which only update show_chart whenever display props changes.

Placing [display] on the useEffect section that you mentioned meant that everytime display props changes, re-init gantt, together with all the config I set inside the useEffect.

If you have a different understanding, please let me know.

Thank you though, for the investigation.