[GH #1406] React 18 Handsontable flickering while scrolling

Tags: #<Tag:0x00007f8b23dc7868> #<Tag:0x00007f8b23dc7430>
#1

Hi HoT team

I tried to upgrade my app to use React 18 and also the using HotColumn component. I have a column that uses custom renderer. Everytime I scroll, these component flickers.

Pretty much the same with your demo: https://codesandbox.io/s/handsontable-data-grid-v13-0-0-react-demo-mlwqq7?from-embed

try to scroll and check the stars and progress bar flickers as well.

I’m curious if you know how to resolve this.

Thank you,
Rem

#2

Hi @r.evangelio

Thank you for reporting this. Before we will have fix for this the workaround would be to set renderAllRows option to true which disabled row virtualization. Then the flickering is gone.

#3

@adrian.szymanski but will renderAllRows affect the performance of the table? just imagine if we have 10k plus rows and doesn’t have row virtualisation.

#4

@r.evangelio

That’s true, it might have negative impact on performance with larger datasets, but for now that’s the only workaround we have for this issue.

#5

Hey,

We have also recently upgraded to React 18 and are having similar issues with scrolling. We have custom headers using createRoot

I just wanted to check on progress for a fix for this and can you give us a possible release date. Or if we have any any other alternatives when it comes to custom renderers.

Thanks, James

1 Like
#6

@james.dale I’m following this PR on github. https://github.com/handsontable/handsontable/pull/10572

1 Like
#7

Hi @james.dale

I just wanted to say the same what @r.evangelio said. One of our users is preparing a PR that would fix this problem. I would recommend to check when it will be merged. I will also update this topic then.

1 Like
#8

Hey,

Finally got around to upgrading to 14.2 and I’m still having issues with flickering when it comes to column headers. We have custom filter icons and sorting. We’re using the afterGetColHeader method here. Any advice on what we can do to avoid this.

I checked out https://github.com/handsontable/handsontable/pull/10758

Cheers, James

#9

Hi @james.dale

Thank you for the update. This is issue should be solved in 14.2, can you please share any example where this problem is replicable?

#10

Cheers @adrian.szymanski I will take a look and try to put an example together.