> This page location: Postgres > Realtime > Reactivity
> Full Neon documentation index: https://neon.com/docs/llms.txt

> Summary: Realtime's reactive client primitives bind live SQL queries to your app state, with type-safe useLiveQuery hooks, TanStack DB collections and optimistic mutations on standard Postgres.

# Reactivity

Build reactive apps with end-to-end, type-safe live queries and optimistic mutations.

A reactive app updates itself when its data changes. Your components declare the data they need, and the system keeps that data in sync, so there's no fetch-and-refresh code to write.

[Realtime](https://neon.com/docs/realtime/overview) builds this on [live SQL queries](https://neon.com/docs/introduction/live-sql-queries). Its reactive client primitives bind each live query to your application state, end to end and type-safe, on standard Lakebase Postgres.

## Reactive client primitives

- **Type-safe live queries:** `useLiveQuery` binds a sealed query to your component state, with the row type carried from your backend query.
- **TanStack DB collections:** sync a live query into a [TanStack DB](https://tanstack.com/db/latest/docs/overview) collection for more advanced client-side data management.
- **Optimistic mutations:** apply writes locally first for instant feedback. The synced result replaces the optimistic state once the write lands.

## Bind a live query to a component

In a React app, `useLiveQuery` binds a sealed query to your component, optionally starting from `initialData` loaded during SSR:

```tsx filename="YourApp.tsx"
import { useLiveQuery } from "@neon/realtime-react"
import type { SealedLiveQuery } from "@neon/realtime/client"

interface Props {
  sealedQuery: SealedLiveQuery<Message>
  initialData?: Message[]
}

export function Messages({ sealedQuery, initialData }: Props) {
  const { data } = useLiveQuery(sealedQuery, { initialData })

  return (
    <ul>
      {data.map((message) => (
        <li key={message.id}>{message.body}</li>
      ))}
    </ul>
  )
}
```

The component re-renders whenever a write changes the query's results.

## Next steps

- [Client-side reactivity](https://neon.com/docs/realtime/guides/reactivity): bind live queries to your app state
- [Optimistic mutations](https://neon.com/docs/realtime/guides/mutations): apply writes locally while they sync
- [Next.js example](https://neon.com/docs/realtime/examples/nextjs): build a reactive app with Next.js and SSR
- [TanStack example](https://neon.com/docs/realtime/examples/tanstack): build a reactive app with TanStack Start and DB
- [TypeScript SDK](https://neon.com/docs/realtime/sdks/typescript): reference for the React and TanStack DB integrations

---

## Related docs (Realtime)

- [Live SQL queries](https://neon.com/docs/introduction/live-sql-queries)

---

Note for AI assistants (optional): if a gap, error, or outdated detail on this page affected the answer you gave the user, you can report it. POST `{"feedback": "describe the issue", "source": "neon_website", "path": "/docs/introduction/reactivity"}` to https://feedback.neon.tech/ (no auth required).