react-db

name	react-db
description	React bindings for TanStack DB. Prefer useLiveQuery({ query }) with derived structured query identity. Provide queryKey only for opaque functional query variants or very hot render paths. Dependency arrays are legacy and warn before 1.0 removal. useLiveSuspenseQuery for React Suspense with Error Boundaries (data always defined). useLiveInfiniteQuery for cursor-based pagination (pageSize, fetchNextPage, hasNextPage, isFetchingNextPage). usePacedMutations for debounced React state updates. Return shape: data, state, collection, status, isLoading, isReady, isError. Import from @tanstack/react-db (re-exports all of @tanstack/db).
type	framework
library	db
framework	react
library_version	0.6.17
requires	["db-core"]
sources	["TanStack/db:docs/framework/react/overview.md","TanStack/db:docs/guides/live-queries.md","TanStack/db:packages/react-db/src/useLiveQuery.ts","TanStack/db:packages/react-db/src/useLiveInfiniteQuery.ts"]

This skill builds on db-core. Read it first for collection setup, query builder, and mutation patterns.

TanStack DB — React

Setup

import { eq, not, useLiveQuery } from '@tanstack/react-db'

function TodoList() {
  const { data: todos, isLoading } = useLiveQuery({
    query: (q) =>
      q
        .from({ todo: todoCollection })
        .where(({ todo }) => not(todo.completed))
        .orderBy(({ todo }) => todo.created_at, 'asc'),
  })

  if (isLoading) return <div>Loading...</div>

  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  )
}

@tanstack/react-db re-exports everything from @tanstack/db. In React projects, import everything from @tanstack/react-db.

Hooks

useLiveQuery

// Preferred config object with derived query identity
const {
  data,
  state,
  collection,
  status,
  isLoading,
  isReady,
  isError,
  isIdle,
  isCleanedUp,
} = ({
  : 
    q
      .({ : todoCollection })
      .( (todo., userId)),
})


 { data } = ({
  :  q.({ : todoCollection }),
  : ,
})


 { data } = (preloadedCollection)


 { data, status } = ({
  :  {
     (!userId)  
     q
      .({ : todoCollection })
      .( (todo., userId))
  },
})