Skip to content

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

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:

functionSuspender({ infiniteQuery }){constdata=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:

functionRegular({ infiniteQuery }){constdata=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