Skip to main content
The @powersync/react package provides React hooks for use with the JavaScript Web SDK or React Native SDK. 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.

npm: @powersync/react

 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. It automatically converts certain loading/fetching states into Suspense signals, triggering Suspense boundaries in parent components.
For advanced watch query features like incremental updates and differential results for React Hooks, see Live Queries / Watch Queries.
The full API Reference and example code can be found here:

React hooks for PowerSync | PowerSync JavaScript SDK Docs