Updating Item state to a smaller list of items

[justisom]

Describe the bug
Item state changes that reduce the list size causing a failure:
This usually happens when you've mutated or changed the "items" array in a way that makes it shorter than the previous "items" array. Masonic knows nothing about your underlying data and when it caches cell positions, it assumes you aren't mutating the underlying "items".

To Reproduce
Steps to reproduce the behavior:

Using MyMasonry in this way:
useMasonry({ positioner: positioner, resizeObserver, items, height, scrollTop, isScrolling, overscanBy: 6, render: Item })
where items is a stateful list that can grow or shrink

Expected behavior
In my case I'm using a single page with table pagination that can display a variable maximum amount of items per page. So if I were to choose 50 when I'm looking at 100, I'd like it to be able to re-draw the whole thing. That doesn't seem to be happening.
Also this is an issue when I start using filtering.

I don't think the provided examples
See https://codesandbox.io/s/masonic-w-react-router-example-2b5f9?file=/src/index.js for an example that gets around this limitations. For advanced implementations, see https://codesandbox.io/s/masonic-w-react-router-and-advanced-config-example-8em42?file=/src/index.js
adequately address the issue that I'm facing since I'm not changing my route in this case. I'm simply updating state and re-rendering my div.

Happy to clarify further.

Thanks!

[jaredLunde]

The examples actually do address the issue. You either need to use a key prop to reset the component or provide a dependency array to the positioner. So in your case, you'd do that after you update the state/re-render. e.g.

usePositioner({...}, [itemsPerPage])

[justisom]

usePositioner({...}, [itemsPerPage])

That's the part I missed. Thanks so much!