fix: PowerSync react hooks, infinite re-renders when no parameters are provided

Author: Manrich121

.changeset/strong-mice-smile.md

@@ -0,0 +1,5 @@
+---
+"@journeyapps/powersync-react": patch
+---
+
+Fix issue with PowerSync React hooks that caused an infinite re-renders, when no `parameters` are provided

packages/powersync-react/package.json

@@ -24,7 +24,7 @@
   },
   "homepage": "https://github.com/journeyapps/powersync-react-native-sdk/packages/powersync-react/#readme",
   "dependencies": {
-    "@journeyapps/powersync-sdk-common": "^0.0.1-alpha.0"
+    "@journeyapps/powersync-sdk-common": "^0.0.1-alpha.1"
   },
   "peerDependencies": {
     "react": "*"

packages/powersync-react/src/hooks/usePowerSyncQuery.ts

@@ -1,23 +1,29 @@
-import React from 'react';
-import { usePowerSync } from './PowerSyncContext';
+import React from "react";
+import { usePowerSync } from "./PowerSyncContext";
 
 /**
  * A hook to access a single static query.
  * For an updated result, use usePowerSyncWatchedQuery instead
  */
-export const usePowerSyncQuery = <T = any>(sqlStatement: string, parameters: any[] = []): T[] => {
+export const usePowerSyncQuery = <T = any>(
+  sqlStatement: string,
+  parameters: any[] = []
+): T[] => {
   const powerSync = usePowerSync();
   if (!powerSync) {
     return [];
   }
-
+  // This will return the previous parameters until the contents of parameters array change,
+  // thereby providing a stable array reference and preventing excessive useEffect runs
+  const memoizedParams = React.useMemo(() => parameters, [...parameters]);
   const [data, setData] = React.useState<T[]>([]);
 
   React.useEffect(() => {
     powerSync.execute(sqlStatement, parameters).then((result) => {
       setData(result.rows?._array ?? []);
     });
-  }, [powerSync, sqlStatement, parameters]);
+    //
+  }, [powerSync, sqlStatement, memoizedParams]);
 
   return data;
 };

packages/powersync-react/src/hooks/usePowerSyncWatchedQuery.ts

@@ -1,20 +1,25 @@
-import { SQLWatchOptions } from '@journeyapps/powersync-sdk-common';
-import React from 'react';
-import { usePowerSync } from './PowerSyncContext';
+import { SQLWatchOptions } from "@journeyapps/powersync-sdk-common";
+import React from "react";
+import { usePowerSync } from "./PowerSyncContext";
 
 /**
  * A hook to access the results of a watched query.
  */
 export const usePowerSyncWatchedQuery = <T = any>(
   sqlStatement: string,
   parameters: any[] = [],
-  options: Omit<SQLWatchOptions, 'signal'> = {}
+  options: Omit<SQLWatchOptions, "signal"> = {}
 ): T[] => {
   const powerSync = usePowerSync();
   if (!powerSync) {
     return [];
   }
 
+  const memoizedParams = React.useMemo(() => parameters, [...parameters]);
+  const memoizedOptions = React.useMemo(
+    () => options,
+    [JSON.stringify(options)]
+  );
   const [data, setData] = React.useState<T[]>([]);
   const abortController = React.useRef(new AbortController());
 
@@ -25,7 +30,7 @@ export const usePowerSyncWatchedQuery = <T = any>(
     (async () => {
       for await (const result of powerSync.watch(sqlStatement, parameters, {
         ...options,
-        signal: abortController.current.signal
+        signal: abortController.current.signal,
       })) {
         setData(result.rows?._array ?? []);
       }
@@ -34,7 +39,7 @@ export const usePowerSyncWatchedQuery = <T = any>(
     return () => {
       abortController.current?.abort();
     };
-  }, [powerSync, sqlStatement, parameters]);
+  }, [powerSync, sqlStatement, memoizedParams, memoizedOptions]);
 
   return data;
 };