jaredLunde / jaredLunde/masonic
CPU max out when using useInfiniteLoader with totalItems arguement
- Dominant language
- TypeScript
- Stars
- 1.4k
- Forks
- 63
- PR merge metrics
- No merged PRs in 30d
Description
I want to first say thank you for your patience with my many questions over the past few days. I truly appreciate your help and this module has proven to be a one stop shop for a lot of features I wish to implement. THANK YOU!
While trying to implement infinite scrolling I noticed a quirk with _totalItems_ argument in _useInfiniteLoader_ that causes the CPU to spike over 100% when scrolling beyond the item limit.
**To Reproduce**
I forked the example [code ](https://codesandbox.io/p/sandbox/useinfiniteloader-example-forked-k9hc2k)and put a print statement in the fakeQuery function. Once I hit the max it starts printing out like crazy and the CPU spikes.
I added `totalItems: 100` at line 20 and a print statement at line 129.
**Expected behavior**
I figured the function call for queries would stop after the limit had been hit.
Contributor guide
Research direction
Start with the linked useInfiniteLoader example, where totalItems is set to 100 and fakeQuery prints each call. Reproduce scrolling beyond the item limit, then inspect the useInfiniteLoader implementation to trace repeated queries. Done means queries stop after the totalItems limit and CPU usage no longer spikes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend, performance
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100