react-db

Bind TanStack DB to React applications with live query hooks.

3.9k|254|Updated Mar 11, 2025
One-click install
npx skills add https://github.com/TanStack/db --skill react-db
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-db
Source: https://github.com/TanStack/db/tree/main/packages/react-db/skills/react-db
Command: npx skills add https://github.com/TanStack/db --skill react-db

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Bind TanStack DB to React applications to enable live, reactive queries that update UI automatically.

Core Features & Use Cases

  • UseLiveQuery, useLiveSuspenseQuery, useLiveInfiniteQuery, and usePacedMutations to build reactive UI with real-time data.
  • Return shape includes data, state, collection, status, isLoading, isReady, isError, and re-exports core APIs from @tanstack/db via @tanstack/react-db.
  • Supports dependency arrays, Suspense + Error Boundaries usage, and cursor-based pagination patterns.

Quick Start

Install @tanstack/react-db and start using useLiveQuery to render live data from your TanStack DB collections.

Frequently Asked Questions about react-db

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I enable live queries in React to update UI automatically when data changes?

Live queries in React update UI automatically by binding TanStack DB collections to components using hooks like useLiveQuery, which return reactive data, state, and status fields that re-render on database changes.

Can I use Suspense and Error Boundaries with live data fetching in React?

Yes, Suspense and Error Boundaries work with live data fetching using the useLiveSuspenseQuery hook, which integrates with React's concurrent rendering to manage loading and error states for real-time database collections.

How do I implement cursor-based pagination for live query results in a React app?

Cursor-based pagination for live query results is implemented using the useLiveInfiniteQuery hook, which supports dependency arrays to fetch subsequent pages of reactive data from TanStack DB collections dynamically.

What is the best way to apply optimistic updates to real-time data in React?

Optimistic updates to real-time data in React are applied using the usePacedMutations hook, allowing the UI to reflect changes immediately before the database confirms them, ensuring a responsive reactive experience.

Does this React binding require any specific dependencies to function?

Yes, the React binding requires db-core to function, as it re-exports core APIs from @tanstack/db via @tanstack/react-db to ensure full compatibility with the React ecosystem and its reactive query lifecycle.

What data fields are returned from a live query hook in React?

A live query hook returns an object containing data, state, collection, status, isLoading, isReady, and isError fields, providing comprehensive reactive state management for rendering data-driven React components.