> ## Documentation Index
> Fetch the complete documentation index at: https://docs.powersync.com/llms.txt
> Use this file to discover all available pages before exploring further.

# React Hooks

> Use PowerSync React hooks including useQuery, useStatus, and useSuspenseQuery to build reactive components with live query results.

The `@powersync/react` package provides React hooks for use with the [JavaScript Web SDK](/client-sdks/reference/javascript-web) or [React Native SDK](/client-sdks/reference/react-native-and-expo). These hooks are designed to support reactivity, and can be used to automatically re-render React components when query results update or to access PowerSync connectivity status changes.

<Card title="npm: @powersync/react" icon="npm" href="https://www.npmjs.com/package/@powersync/react" horizontal />

The main hooks available are:

* `useQuery`: This allows you to access the results of a watched query. The response includes `isLoading`, `isFetching` and `error` properties.

* `useStatus`: Access the PowerSync connectivity status. This can be used to update the UI based on whether the client is connected or not.

* `useSuspenseQuery`: This hook also allows you to access the results of a watched query, but its loading and fetching states are handled through [Suspense](https://react.dev/reference/react/Suspense). It automatically converts certain loading/fetching states into Suspense signals, triggering Suspense boundaries in parent components.

<Note>
  For advanced watch query features like incremental updates and differential results for React Hooks, see [Live Queries / Watch Queries](/client-sdks/watch-queries).
</Note>

The full API Reference and example code can be found here:

<Card title="React hooks for PowerSync | PowerSync JavaScript SDK Docs" icon="book" href="https://powersync-ja.github.io/powersync-js/react-sdk" horizontal />