Skip to content

Unexpected behaviour involving tracked properties and React's use function #9727

@OliverJAsh

Description

@OliverJAsh

Describe the bug

I am using useInfiniteQuery with experimental_prefetchInRender and React's use function.

After suspending, hasNextPage is always false even though there is a next page:

function Suspender({ infiniteQuery }) {
  const data = use(infiniteQuery.promise);

  const { hasNextPage } = infiniteQuery;

  // ❌ This will log false and never log true.
  // If we move the destructure above so it's before
  // `use` then it will log true.
  console.log(hasNextPage);

  return 'Suspender';
}

This issue does not occur if we remove use:

function Regular({ infiniteQuery }) {
  const data = infiniteQuery.data;

  const { hasNextPage } = infiniteQuery;

  // ✅ This will log true.
  console.log(hasNextPage);

  return 'Regular';
}

Your minimal, reproducible example

https://stackblitz.com/edit/tanstack-query-e2m1ch99?file=src%2Findex.tsx&preset=node

Steps to reproduce

Go to the reduced test case and observe the console logs. You should only see false.

Expected behavior

hasNextPage should log true because there is a next page.

How often does this bug happen?

None

Screenshots or Videos

No response

Platform

N/A

Tanstack Query adapter

None

TanStack Query version

5.90.2

TypeScript version

No response

Additional context

I believe it has something to do with tracked properties. The issue disappears after adding notifyOnChangeProps: ['hasNextPage'].

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions