@rpcbase/client 0.107.0 → 0.111.0

package/hashState.js

@@ -3,7 +3,8 @@ import {useState, useEffect, createContext, useContext, useCallback} from "react
 import LZString from "lz-string"
 import _isNil from "lodash/isNil"
 import _omitBy from "lodash/omitBy"
-import isEqual from "fast-deep-equal"
+
+import isEqualValues from "./isEqualValues"
 
 
 const PAGE_NAVIGATION_EVENT = "RB_PAGE_NAVIGATION"
@@ -87,7 +88,7 @@ export const HashStateProvider = ({children}) => {
         ...parsed,
       }
       // apply only if changed
-      if (!isEqual(hashState, newState)) {
+      if (!isEqualValues(hashState, newState)) {
         setHashState(newState)
       }
     }

package/isEqualValues.js

@@ -0,0 +1,47 @@
+/* @flow */
+const isEqual = require("fast-deep-equal/react")
+
+
+const isPlainObject = (obj) => {
+  return Object.prototype.toString.call(obj) === "[object Object]"
+}
+
+const sortValuesConsideringObjects = (values) => {
+  return values
+    .map(val => (isPlainObject(val) ? sortValuesConsideringObjects(Object.values(val)) : val))
+    .sort()
+}
+
+const isEqualValues = (a, b) => {
+  // Extract values and sort them if they belong to plain objects
+  const valsA = isPlainObject(a) ? sortValuesConsideringObjects(Object.values(a)) : a
+  const valsB = isPlainObject(b) ? sortValuesConsideringObjects(Object.values(b)) : b
+
+  if (valsA === null && valsB === null) {
+    return true
+  }
+
+  if (Array.isArray(valsA) || Array.isArray(valsB)) {
+    return isEqual(valsA, valsB)
+  }
+
+  // Check value count
+  if (valsA.length !== valsB.length) return false
+
+  // Compare the sorted arrays of values
+  for (let i = 0; i < valsA.length; i++) {
+    if (typeof valsA[i] === "object" && typeof valsB[i] === "object") {
+      if (!isEqualValues(valsA[i], valsB[i])) {
+        return false
+      }
+    } else {
+        if (!isEqual(valsA[i], valsB[i])) {
+          return false
+        }
+    }
+  }
+  return true
+}
+
+
+module.exports = isEqualValues

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpcbase/client",
-  "version": "0.107.0",
+  "version": "0.111.0",
   "scripts": {
     "build-firebase": "webpack -c firebase/webpack.config.js",
     "build": "yarn build-firebase",

package/rts/getUseQuery/index.js

@@ -3,10 +3,13 @@ import assert from "assert"
 import {Platform} from "react-native"
 import {useCallback, useEffect, useState, useMemo, useId, useRef} from "react"
 import debug from "debug"
-import isEqual from "fast-deep-equal/react"
 import _omit from "lodash/omit"
 import LZString from "lz-string"
 
+// TODO: remove this when stable
+import isEqual from "fast-deep-equal/react"
+
+import isEqualValues from "../../isEqualValues"
 import get_uid from "../../auth/get_uid"
 
 import useData from "./useData"
@@ -50,6 +53,7 @@ const getUseQuery = (register_query) => (
 
   const [source, setSource] = useState()
 
+  const dataRef = useRef(null)
   const [data, setData] = useData({useStorage, storageKey, hasInitiallySetFromStorage})
 
   const [error, setError] = useState()
@@ -69,6 +73,8 @@ const getUseQuery = (register_query) => (
 
   const applyNewData = (newData, context) => {
     setData(newData)
+    // set data in a ref so that it doesn't force re-rendering ie: unsubscribe / resubscribe
+    dataRef.current = newData
 
     // we only save network queries
     if (useStorage && context.source === "network") {
@@ -142,7 +148,7 @@ const getUseQuery = (register_query) => (
         hasFirstReply.current = true
 
         // skip if we already have the data
-        if (isEqual(data, newData)) {
+        if (isEqualValues(data, newData)) {
           applyContext(context)
           return
         }
@@ -158,7 +164,11 @@ const getUseQuery = (register_query) => (
         return
       }
 
-      if (!isEqual(data, newData)) {
+      if (isEqual(data, newData) && !isEqualValues(data, newData) && __DEV__) {
+        alert("EQUALITY MISMATCH THIS SHOULD NOT HAPPPEND!!!", data, newData)
+      }
+
+      if (!isEqualValues(dataRef.current, newData)) {
         applyContext(context)
         applyNewData(newData, context)
       } else {
@@ -170,8 +180,10 @@ const getUseQuery = (register_query) => (
       log && log("useQuery cleanup unsubscribe()")
       typeof unsubscribe === "function" && unsubscribe()
     }
+
+    // WARNING: do not change the hooks dependencies param or you risk creating infinite loops as it unsubscribes on cleanup
     // TODO: this isnt right we need to update on options change too
-  }, [JSON.stringify(query), data, key])
+  }, [JSON.stringify(query), key])
 
 
   const loadNextPage = useCallback(() => {