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, fetchReason and error properties. While isFetching is true, fetchReason is 'initial', 'refresh' (after calling refresh() on a runQueryOnce query), 'tables-changed' or 'settings-changed'. 'settings-changed' means the SQL, parameters or options changed, and data still holds the previous query’s rows until the updated query returns its first result. fetchReason requires @powersync/react 2.1.0 or later.
  • 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