Tweaks

docs/react.asyncresult.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.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>

packages/react/.eslintrc.yaml

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

packages/react/package.json

@@ -46,15 +46,15 @@
     "React"
   ],
   "peerDependencies": {
-    "react": ">=16.8.0"
+    "react": ">=16.13.0"
   },
   "dependencies": {
-    "@cerbos/core": "^0.16.0"
+    "@cerbos/core": "^0.16.0",
+    "use-deep-compare-effect": "^1.8.1"
   },
   "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",

packages/react/src/cerbos-provider.tsx

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

packages/react/src/index.ts

@@ -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";