react-db

name	react-db
description	React bindings for TanStack DB. useLiveQuery hook with dependency arrays (8 overloads: query function, config object, pre-created collection, disabled state via returning undefined/null). 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 { useLiveQuery, eq, not } from '@tanstack/react-db'

function TodoList() {
  const { data: todos, isLoading } = useLiveQuery((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

// Query function with dependency array
const {
  data,
  state,
  collection,
  status,
  isLoading,
  isReady,
  isError,
  isIdle,
  isCleanedUp,
} = (
  
    q
      .({ : todoCollection })
      .( (todo., userId)),
  [userId],
)


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


 { data } = (preloadedCollection)


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