fix: update fetchNextPage condition in Example component

[alikhani-dev]

In the infinite scroll example, I added hasNextPage && !isFetchingNextPage guards to the useEffect that triggers fetchNextPage.
Without these guards, the effect may fire multiple times or after there are no more pages, causing unnecessary fetches.
This aligns the example with recommended usage from the docs of useInfiniteQuery.

Summary by CodeRabbit

• Bug Fixes

  • Infinite scroll now loads additional content only when a next page exists and no fetch is already in progress, preventing duplicate requests and erratic behavior near the viewport edge.

• Performance

  • Reduced unnecessary network calls during infinite scroll, improving responsiveness and bandwidth usage.
  • More predictable, smoother scrolling experience with fewer stalled or repeated loads.

[coderabbitai]

Walkthrough

Updated infinite scroll logic in the React example to conditionally trigger fetchNextPage only when the sentinel is in view, a next page is available, and no fetch is currently in progress. The effect’s dependency array now includes inView, hasNextPage, isFetchingNextPage, and fetchNextPage.

Changes

Cohort / File(s)	Summary
Infinite scroll fetch gating examples/react/load-more-infinite-scroll/src/pages/index.tsx	useEffect now checks hasNextPage and !isFetchingNextPage before calling fetchNextPage; dependencies expanded to [inView, hasNextPage, isFetchingNextPage, fetchNextPage].

Sequence Diagram(s)

sequenceDiagram
  autonumber
  participant U as User
  participant V as Viewport/Observer
  participant P as Page Component
  participant RQ as React Query

  U->>V: Scrolls
  V-->>P: inView = true
  alt inView && hasNextPage && !isFetchingNextPage
    P->>RQ: fetchNextPage()
    RQ-->>P: Appends next page
  else No next page or fetch in progress
    P-->>P: Do nothing
  end

  note over P: useEffect deps: inView, hasNextPage, isFetchingNextPage, fetchNextPage

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

I nudge the scroll with a whiskered grin,
Pages hop forward, but only when in—
No queue is busy, a next to be found,
I bounce through lists without a sound.
Carrots cached, I fetch with care,
One more nibble—only if it’s there. 🥕🐇

Warning

Review ran into problems

🔥 Problems

Git: Failed to clone repository. Please run the @coderabbitai full review command to re-trigger a full review. If the issue persists, set path_filters to include or exclude specific files.

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

examples/react/load-more-infinite-scroll/src/pages/index.tsx (1)

52-56: Nit: prefer early-return and explicitly ignore the Promise.

Slightly flattens the effect and avoids any no-floating-promises lint:

-  React.useEffect(() => {
-    if (inView && hasNextPage && !isFetchingNextPage) {
-      fetchNextPage()
-    }
-  }, [inView, hasNextPage, isFetchingNextPage, fetchNextPage])
+  React.useEffect(() => {
+    if (!inView || !hasNextPage || isFetchingNextPage) return
+    void fetchNextPage()
+  }, [inView, hasNextPage, isFetchingNextPage, fetchNextPage])

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f49cc75 and 6e04ffd.

📒 Files selected for processing (1)

• examples/react/load-more-infinite-scroll/src/pages/index.tsx (1 hunks)

🔇 Additional comments (1)

examples/react/load-more-infinite-scroll/src/pages/index.tsx (1)

53-56: Good fix: guard fetchNextPage with hasNextPage and !isFetchingNextPage.

Prevents duplicate/in-flight fetches and aligns with recommended usage. Looks correct with the expanded deps array.