jaredLunde / jaredLunde/masonic
Updating Item state to a smaller list of items
- Dominant language
- TypeScript
- Stars
- 1.4k
- Forks
- 63
- PR merge metrics
- No merged PRs in 30d
Description
**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!
Contributor guide
Research direction
Start with the useMasonry call shown in the report and reproduce the failure by changing the stateful items list from a larger page to a smaller one, including filtering. Compare the behavior with the linked React Router examples. Done means the masonry layout redraws correctly when items shrink without requiring a route change.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100