jaredLunde / jaredLunde/masonic

CPU max out when using useInfiniteLoader with totalItems arguement

Open
#162 1 comment 0 reactions 0 assignees View on GitHub
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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.