Add test & fix missing dep in RealmProvider

packages/realm-react/.eslintrc.json

@@ -8,7 +8,12 @@
   "rules": {
     "@typescript-eslint/explicit-function-return-type": "off",
     "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "warn",
+    "react-hooks/exhaustive-deps": [
+      "warn",
+      {
+        "additionalHooks": "(^useQuery$)"
+      }
+    ],
     "jsdoc/check-tag-names": "off",
     "jsdoc/require-jsdoc": "off",
     "jsdoc/require-returns": "off",

packages/realm-react/src/RealmProvider.tsx

@@ -123,7 +123,7 @@ export function createRealmProvider(
       if (realmRef) {
         realmRef.current = realm;
       }
-    }, [realm]);
+    }, [realm, realmRef]);
 
     useEffect(() => {
       const realmRef = currentRealm.current;

packages/realm-react/src/__tests__/useQueryHook.test.tsx

@@ -112,4 +112,22 @@ describe("useQueryHook", () => {
 
     expect(collection[99]).toBe(undefined);
   });
+
+  it("should support reversed order of arguments for exhausive deps", () => {
+    // Eslint will trigger warning here with
+    // 120:92  warning  React Hook useQuery has a missing dependency: 'gender'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
+    // which is correct behaviour.
+    const { result } = renderHook(
+      ({ gender }) => useQuery<IDog>((objects) => objects.filtered("gender = $0", gender), [], "dog"),
+      {
+        initialProps: { gender: "male" },
+      },
+    );
+    const collection = result.current;
+
+    expect(collection).not.toBeNull();
+    expect(collection.length).toBe(2);
+    expect(collection[0]).toMatchObject(testDataSet[0]);
+    expect(collection[1]).toMatchObject(testDataSet[3]);
+  });
 });

packages/realm-react/src/useQuery.tsx

@@ -87,6 +87,7 @@ export function createUseQuery(useRealm: () => Realm) {
     // We want the user of this hook to be able pass in the `query` function inline (without the need to `useCallback` on it)
     // This means that the query function is unstable and will be a redefined on each render of the component where `useQuery` is used
     // Therefore we use the `deps` array to memoize the query function internally, and only use the returned `queryCallback`
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     const queryCallback = useCallback(query, [...deps, ...requiredDeps]);
 
     // If the query function changes, we need to update the cachedCollection