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

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions