Stop useInfiniteScroll from recreating the IntersectionObserver on every load toggle

[RUKAYAT-CODER]

Overview
In src/hooks/useInfiniteScroll.ts the observer effect (lines 60-77) includes loading and runLoadMore in its deps, and runLoadMore depends on loading (line 54). Every loading transition disconnects and recreates the IntersectionObserver and re-observes the sentinel, which is wasteful and can miss or duplicate intersection callbacks during rapid scrolling. Read loading from a ref inside the callback and drop it from the deps.

[Ugooweb]

@Ugooweb has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

I will solve this issue well and submit pr today

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Ugooweb to this issue.

[Benedict315]

@Benedict315 has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

Hello please assign me to this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Benedict315 to this issue.

[Nacho1499]

@Nacho1499 has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

Hello Maintainer,

I’m Nacho, a full-stack developer, and I’d love to contribute to the project. I’m particularly interested in working on issue #898, Stop useInfiniteScroll from recreating the IntersectionObserver on every load toggle.

I’ve reviewed the issue, and my approach would be:

1. Review src/hooks/useInfiniteScroll.ts to understand how the IntersectionObserver, loading state, and runLoadMore callback currently interact.

2. Identify the dependency chain causing the observer effect to run whenever loading changes, since runLoadMore currently depends on loading.

3. Introduce a ref for the current loading state so the IntersectionObserver callback can access the latest loading value without requiring the observer effect to depend on it.

4. Update runLoadMore and the observer callback to use the ref-based loading state, avoiding stale values while keeping the callback stable.

5. Remove unnecessary dependencies from the observer effect, allowing the IntersectionObserver to remain attached instead of being disconnected and recreated on every loading transition.

6. Preserve existing infinite-scroll behavior, ensuring loading is still prevented when a request is already in progress and that legitimate load-more events continue to work correctly.

7. Add or update tests covering initial observer creation, loading state transitions, rapid scrolling/intersection callbacks, and ensuring duplicate load requests are not triggered.

8. Run the existing test, lint, and type-check suites to verify the optimization does not introduce regressions.

I’ll keep the change focused and minimal while ensuring the observer remains stable and always has access to the latest loading state.

If the issue is still available, I’d really appreciate the opportunity to be assigned to it. Thank you for your time, and I look forward to contributing to the project!

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Nacho1499 to this issue.

[israeloluwasegun293-stars]

@israeloluwasegun293-stars has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

please, kindly assign me this.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @israeloluwasegun293-stars to this issue.

[abdulazizishaq212-prog]

@abdulazizishaq212-prog has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

i will like to work on this issues, asign me

ℹ️ Repo Maintainers: To accept this application, review their application or assign @abdulazizishaq212-prog to this issue.

[drips-wave]

Congratulations, @abdulazizishaq212-prog! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on August 31, 2026.

🧑‍💻 @abdulazizishaq212-prog: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[grantfox-oss]

🎉 This issue has been marked as completed on GrantFox as part of the Third Campaign campaign!

@abdulazizishaq212-prog's PR #1246 was approved and merged by @RUKAYAT-CODER.

🏆 @abdulazizishaq212-prog: You earned 35 FoxPoints for this contribution! Your current tier: Explorer (274 total points). Track your full progress on GrantFox.

👏 Great work, @abdulazizishaq212-prog! Keep contributing to rinafcode.

[drips-wave]

This issue has been completed by @abdulazizishaq212-prog as part of the Stellar Wave Program's 8th Wave 🥳

😎 @abdulazizishaq212-prog: You earned 200 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here. You can also Leave a review to share your experience working on this issue.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.