Optimise deep equality check and refactor useCerbosRequest

Signed-off-by: Andrew Haines <[email protected]>

Author: haines

docs/react.asyncresult.data.md

@@ -2,87 +2,23 @@
 
 [Home](./index.md) > [@cerbos/react](./react.md) > [AsyncResult](./react.asyncresult.md)
 
-## AsyncResult interface
+## AsyncResult type
 
 
 **Signature:**
 
 ```typescript
-export interface AsyncResult<T> 
+export type AsyncResult<T> = {
+    isLoading: true;
+    data: undefined;
+    error: undefined;
+} | {
+    isLoading: false;
+    data: T;
+    error: undefined;
+} | {
+    isLoading: false;
+    data: undefined;
+    error: Error;
+};
 ```
-
-## Properties
-
-<table><thead><tr><th>
-
-Property
-
-
-</th><th>
-
-Modifiers
-
-
-</th><th>
-
-Type
-
-
-</th><th>
-
-Description
-
-
-</th></tr></thead>
-<tbody><tr><td>
-
-[data](./react.asyncresult.data.md)
-
-
-</td><td>
-
-
-</td><td>
-
-T \| undefined
-
-
-</td><td>
-
-
-</td></tr>
-<tr><td>
-
-[error](./react.asyncresult.error.md)
-
-
-</td><td>
-
-
-</td><td>
-
-Error \| undefined
-
-
-</td><td>
-
-
-</td></tr>
-<tr><td>
-
-[isLoading](./react.asyncresult.isloading.md)
-
-
-</td><td>
-
-
-</td><td>
-
-boolean
-
-
-</td><td>
-
-
-</td></tr>
-</tbody></table>

docs/react.asyncresult.error.md

@@ -89,17 +89,32 @@ Description
 </th></tr></thead>
 <tbody><tr><td>
 
-[AsyncResult](./react.asyncresult.md)
+[CerbosProviderProps](./react.cerbosproviderprops.md)
 
 
 </td><td>
 
 
 
 </td></tr>
-<tr><td>
+</tbody></table>
 
-[CerbosProviderProps](./react.cerbosproviderprops.md)
+## Type Aliases
+
+<table><thead><tr><th>
+
+Type Alias
+
+
+</th><th>
+
+Description
+
+
+</th></tr></thead>
+<tbody><tr><td>
+
+[AsyncResult](./react.asyncresult.md)
 
 
 </td><td>

docs/react.asyncresult.isloading.md

@@ -1,5 +1,2 @@
-plugins:
-  - react-hooks
-
 extends:
   - plugin:react-hooks/recommended

docs/react.asyncresult.md

@@ -53,8 +53,7 @@
   },
   "devDependencies": {
     "@types/react": "18.2.67",
-    "eslint-plugin-react-hooks": "4.6.0",
-    "react": "18.2.0"
+    "eslint-plugin-react-hooks": "4.6.0"
   },
   "publishConfig": {
     "access": "public",

docs/react.md

@@ -7,6 +7,8 @@ import type {
 import type { ReactElement, ReactNode } from "react";
 import { createContext, useMemo } from "react";
 
+import { useDeepEqualMemo } from "./use-deep-equal-memo";
+
 export const CerbosContext = createContext<ClientWithPrincipal | undefined>(
   undefined,
 );
@@ -63,9 +65,12 @@ export function CerbosProvider({
   principal,
   auxData,
 }: CerbosProviderProps): ReactElement {
+  const principalMemo = useDeepEqualMemo(principal);
+  const auxDataMemo = useDeepEqualMemo(auxData);
+
   const value = useMemo(
-    () => client.withPrincipal(principal, auxData),
-    [auxData, client, principal],
+    () => client.withPrincipal(principalMemo, auxDataMemo),
+    [client, principalMemo, auxDataMemo],
   );
 
   return (

packages/react/.eslintrc.yaml

@@ -0,0 +1,55 @@
+export function deepEqual(a: unknown, b: unknown): boolean {
+  if (a === b) {
+    return true;
+  }
+
+  if (
+    typeof a !== "object" ||
+    a === null ||
+    typeof b !== "object" ||
+    b === null
+  ) {
+    // one of them is a primitive or null, so if they weren't strictly equal above, then they aren't equal
+    return false;
+  }
+
+  // they are both non-null objects (arrays are objects too)
+
+  if (Array.isArray(a)) {
+    if (!Array.isArray(b)) {
+      return false;
+    }
+
+    // they are both arrays
+
+    if (a.length !== b.length) {
+      return false;
+    }
+
+    for (let i = 0; i < a.length; i++) {
+      if (!deepEqual(a[i], b[i])) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+
+  // they are both objects - ignore more complex types like Map, Symbol, Date etc...
+
+  const keys = Object.keys(a);
+  if (keys.length !== Object.keys(b).length) {
+    return false;
+  }
+
+  for (const key of keys) {
+    const valueA = (a as Record<string, unknown>)[key];
+    const valueB = (b as Record<string, unknown>)[key];
+
+    if (!deepEqual(valueA, valueB)) {
+      return false;
+    }
+  }
+
+  return true;
+}

packages/react/package.json

@@ -1,9 +1,8 @@
-export { CerbosProvider } from "./cerbos-provider";
-export type { CerbosProviderProps } from "./cerbos-provider";
+export { type CerbosProviderProps, CerbosProvider } from "./cerbos-provider";
 export { useCerbos } from "./use-cerbos";
 export {
+  type AsyncResult,
   useCheckResource,
   useCheckResources,
   useIsAllowed,
 } from "./use-cerbos-request";
-export type { AsyncResult } from "./use-cerbos-request";