fix: log warning only once

packages/permissions/src/hooks/use-is-authorized/use-is-authorized.ts

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import invariant from 'tiny-invariant';
 import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
 import { reportErrorToSentry } from '@commercetools-frontend/sentry';
@@ -51,6 +52,14 @@ type TSelectDataFenceData = (
   }
 ) => string[] | null;
 
+// Log a warning only once, and not on each render.
+const useWarning = (condition: boolean, message: string) => {
+  useEffect(() => {
+    invariant(condition, message);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+};
+
 const useIsAuthorized = ({
   demandedPermissions,
   demandedActionRights,
@@ -66,19 +75,19 @@ const useIsAuthorized = ({
 }): boolean => {
   const impliedPermissions = getImpliedPermissions(demandedPermissions);
 
-  invariant(
+  useWarning(
     !demandedActionRights || demandedActionRights.length === 1,
     `@commercetools-frontend/permissions: It is recommended to pass a single demanded action right while using the hook, HoC or component multiple times.`
   );
-  invariant(
+  useWarning(
     !demandedPermissions || demandedPermissions.length === 1,
     `@commercetools-frontend/permissions: It is recommended to pass a single demanded permission while using the hook, HoC or component multiple times.`
   );
-  invariant(
+  useWarning(
     shouldMatchSomePermissions === false,
     `@commercetools-frontend/permissions: It is recommended not to use 'shouldMatchSomePermissions' but instead use the hook, HoC or component multiple times.`
   );
-  invariant(
+  useWarning(
     !impliedPermissions || impliedPermissions.length === 0,
     `@commercetools-frontend/permissions: Demanded permissions contain implied permissions. These are implied: ${impliedPermissions.join(
       ', '