VirtualScroller: does not update items if only rows length changes

[mamsellem]

Describe the bug

VirtualScroller with both directions does not update items if the number of columns changes but not the number of rows.
The error is in useUpdateEffect that compares prev items length with current items length.
This will return false if only the number of columns has changed.

Note that itemSize needs to be set to a constant for the issue to occur.

Reproducer

Demo on stackblitz

PrimeReact version

9.6.0+

React version

18.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[github-actions]

Please fork the Stackblitz project and create a case demonstrating your bug report. This issue will be closed if no activities in 20 days.

[mamsellem]

added demonstrator projet ( see in issue description "Reproducer")

[melloware]

@mamsellem PR is welcome if you have a recommended fix?

[mamsellem]

sure. I will submit a PR when possible

[mamsellem]

Hello I tried to submit a PR from my fork of primereact that it failed with error "you must be a contributor".
This is a screenshot of the submission screen

[melloware]

Weird I have never seen that before it should allow you to open a PR from a fork no problem?

[melloware]

@mamsellem i pushed PR if you want to review.

[mamsellem]

I don't think using deepequals is a good idea.
We are only interesteed in updating the bounds of the virtual scroller, so only the dimensions of the items matter, not the items themselves.

This was my fix for this issue:

line 570 of VirtualScroll.js

useUpdateEffect(() => {
  if (!prevProps.items || prevProps.items.length !== (props.items || []).length || (both && prevProps.items[0].length !== (props.items ? props.items[0].length : 0))) {
      init();
    }

What do you think ?

[melloware]

as mentioned props.items[0] feels hacky to check the first item of the array length.