Skip to content

docs: add comprehensive documentation for useSWRInfinite revalidation behavior and infinite loading example#4255

Closed
ruguoba wants to merge 2 commits into
vercel:mainfrom
ruguoba:docs/infinite-revalidation
Closed

docs: add comprehensive documentation for useSWRInfinite revalidation behavior and infinite loading example#4255
ruguoba wants to merge 2 commits into
vercel:mainfrom
ruguoba:docs/infinite-revalidation

Conversation

@ruguoba
Copy link
Copy Markdown

@ruguoba ruguoba commented May 12, 2026

Description

This PR adds comprehensive documentation for useSWRInfinite's revalidation behavior and a practical infinite loading example, addressing the confusion raised in #785 and #883.

Changes

1. Revalidation Behavior Documentation (docs/infinite-revalidation.md)

  • Added detailed explanation of why only the first page is revalidated by default
  • Documented all relevant configuration options:
    • revalidateFirstPage
    • revalidateAll
    • revalidateIfStale
    • Standard SWR options
  • Provided practical use cases and code examples
  • Added best practices section
  • Included FAQ section for common questions

2. Infinite Loading Example (examples/infinite-loading-intersection-observer.md)

  • Complete example using useSWRInfinite with IntersectionObserver
  • Demonstrates how to use useCallback to prevent infinite loops
  • Includes both JavaScript and TypeScript versions
  • Shows alternative approach with click button
  • Covers cleanup and memory leak prevention

Why This Documentation Is Needed

Issue #785 - Revalidation Behavior Confusion

Many users have been confused by the default behavior of useSWRInfinite where only the first page is revalidated when loading new pages. This documentation clarifies:

  1. Performance optimization: Why revalidating all pages would be a performance disaster
  2. Timeline design: Why first-page revalidation makes sense for most infinite loading use cases
  3. Configuration options: How to customize the behavior for different use cases

Issue #883 - Infinite Loop with IntersectionObserver

Users reported infinite loops when using setSize with IntersectionObserver. The new example demonstrates:

  1. Proper memoization: Using useCallback to prevent function recreation
  2. Observer management: Using useRef to store the observer
  3. Cleanup: Proper cleanup to prevent memory leaks
  4. TypeScript support: Full TypeScript example included

Related Issues

Testing

This is a documentation-only change, so no code testing is required. The documentation has been reviewed for accuracy based on the existing codebase and the discussion in #785 and #883.


Note: This documentation aims to help users understand the design decisions behind useSWRInfinite's revalidation behavior and provide clear guidance on how to implement infinite loading with IntersectionObserver without encountering infinite loops.

… behavior

This documentation explains:
- Why only the first page is revalidated by default
- How to use revalidateFirstPage option
- How to use revalidateAll option
- Best practices for different use cases
- Common questions and answers

Closes #785
@ruguoba ruguoba requested review from huozhi and shuding as code owners May 12, 2026 10:24
…allback

This example demonstrates how to implement infinite loading using:
- useSWRInfinite for data fetching
- IntersectionObserver for scroll detection
- useCallback to prevent infinite loops
- useRef for observer management

Addresses #883
@ruguoba ruguoba changed the title docs: add comprehensive documentation for useSWRInfinite revalidation behavior docs: add comprehensive documentation for useSWRInfinite revalidation behavior and infinite loading example May 12, 2026
@ruguoba ruguoba closed this by deleting the head repository May 13, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Better documentation on the revalidation behavior of the infinite hook

1 participant