> ISPO SDK documentation. [HTML](https://ispo.ai/docs/documents/React.html) · [Documentation index](https://ispo.ai/docs/llms.txt)

# <a id="react-over-the-same-sdk"></a>React, over the same SDK

Import React helpers from `@ispo/sdk/react`. Core calls stay in `@ispo/sdk`; adapters share the same transport, errors, permissions, and subscriptions.

The host-generated bootstrap connects the SDK before loading the app. Keep exactly one `ISPOProvider` and mount `AppReadyBeacon` inside it to report the first committed render. Do not reconnect the bridge from a component.

## <a id="render-live-entity-data"></a>Render live entity data

This component assumes your project has registered a `notes.note` entity type with a string `title` field, and has reviewed request eligibility and a grant to read it. Substitute your app's registered type. The hook maintains the live query and disposes its subscription with the component.

```
import { AppReadyBeacon, ISPOProvider, useLiveEntityQuery } from '@ispo/sdk/react'interface Note {  title: string}function Notes() {  const { records, status, error } = useLiveEntityQuery<Note>('notes.note')  if (status === 'denied') return <p>Allow access to read your notes.</p>  if (error) return <p>{error.message}</p>  if (status !== 'live') return <p>Connecting to your notes…</p>  if (records.length === 0) return <p>No notes are visible to this app.</p>  return <ul>{records.map((note) => <li key={note.id}>{note.data.title}</li>)}</ul>}export function App() {  return <ISPOProvider><AppReadyBeacon /><Notes /></ISPOProvider>}
```

Keep connecting, denied, and error states visible. Do not substitute fabricated records when data is unavailable. A generic TypeScript type describes the data you expect; it does not register an entity schema or grant access.

For larger views, `useLiveEntityQuery` also accepts a selector and equality function. `ISPOProvider` accepts a client when you need to provide one explicitly. Browse the **react** module for their current signatures.