Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

useLiveInfiniteQuery commits an empty first render over a synchronously loaded collection (useLiveQuery doesn't)

Abierto
  • ¿Algo no está bien?
#2,023 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

@KyleAMathews ya está trabajando en esto.

Desde el 5/10/2026.

  • #2027 de @KyleAMathews — abierto

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
72/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Activo
Stack tecnológico
react, typescript
Área
frontend

Línea de trabajo

Start at the useLiveInfiniteQuery hook and compare its collection startup and gcTime behavior with useLiveQuery. Add coverage to the existing hook tests for the synchronous eager-collection reproduction and check StrictMode and abandoned renders. Done means the infinite query has ready data on its first render without leaving sync running for an uncommitted render.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

Describe the bug

With an eager, synchronously loaded collection, useLiveInfiniteQuery commits status: idle, data: [] on the first render and only has rows on the second commit. useLiveQuery over the same query with .limit(pageSize) has the rows on its first render.

In our app this shows up as a route that reads "no events" from the first commit and redirects away before the real data lands.

Cause: since #1675 the hook builds its collection with startSync: false ("Synchronization starts only when useSyncExternalStore commits the controller subscription"), so nothing can be published into the first render. useLiveQuery starts sync during render and relies on gcTime to reclaim a collection whose render never commits.

#1894 / #1896 fixed the db side of this for ordered windows over eager sources, so the remaining gap is the React hook only.

To reproduce

import { act, render } from "@testing-library/react"
import { createCollection, localOnlyCollectionOptions } from "@tanstack/db"
import { useLiveInfiniteQuery, useLiveQuery } from "@tanstack/react-db"

const events = createCollection(
  localOnlyCollectionOptions({
    id: `events`,
    getKey: (e: { id: number; n: number }) => e.id,
    initialData: Array.from({ length: 20 }, (_, i) => ({ id: i, n: i })),
  })
)

const infinite: string[] = []
const plain: string[] = []

function Infinite() {
  const r = useLiveInfiniteQuery(
    (q) => q.from({ e: events }).orderBy(({ e }) => e.n),
    { pageSize: 10 }
  )
  infinite.push(`${r.status} ${r.data.length}`)
  return null
}

function Plain() {
  const r = useLiveQuery({
    query: (q) => q.from({ e: events }).orderBy(({ e }) => e.n).limit(10),
  })
  plain.push(`${r.status} ${r.data.length}`)
  return null
}

await act(async () => { render(<Infinite />) })
await act(async () => { render(<Plain />) })
console.log(infinite, plain)

Observed (status and data length per render)

useLiveInfiniteQuery [ 'idle 0', 'ready 10' ]
useLiveQuery         [ 'ready 10' ]

Expected

useLiveInfiniteQuery [ 'ready 10' ]

Proposed fix

I'd rather not just flip it to startSync: true. My reading of #1675 is that it went to false so a render that never commits doesn't leave a started sync behind. useLiveQuery already handles that case: it starts sync during render with gcTime: 1, and a collection nobody subscribes to is cleaned up after that. The infinite hook already passes the same gcTime (DEFAULT_GC_TIME_MS), so it could start sync in render the same way and let gc reclaim abandoned ones. I tried flipping startSync to true in the built dist/esm/useLiveInfiniteQuery.js and the repro above logs [ 'ready 10' ]. I haven't run it under StrictMode or concurrent abandoned renders, so that part needs checking against the existing hook tests.

Happy to open a PR if that direction is fine.

Versions

  • @tanstack/react-db 0.5.3
  • @tanstack/db 0.11.3
  • react / react-dom 19.3.0
  • vitest 5.0.3, jsdom, @testing-library/react 16.3.3
Lenguaje dominante
TypeScript
Estrellas
3.9k
Forks
268
Merge medio
1 d 4 h
PR fusionados (30 d)
178

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de TanStack/db

Todos los issues de TanStack/db

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.