jaredLunde / jaredLunde/masonic

Updating Item state to a smaller list of items

Open
#158 2 comments 0 reactions 0 assignees View on GitHub
question
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.