(release-4.0.0) HDS-2532 fix events

packages/react/src/components/cookieConsent/hooks/useCookieConsent.ts

@@ -101,12 +101,12 @@ export function useCookieConsent(props: CookieConsentReactProps): CookieConsentR
     onReady,
   });
 
-  const getAllConsentStatuses = () => {
+  const getAllConsentStatuses = useCallback(() => {
     if (!instanceRef.current || !instanceRef.current.getAllConsentStatuses) {
       return [];
     }
     return instanceRef.current.getAllConsentStatuses();
-  };
+  }, []);
 
   const current = windowObjectGetter();
   if (current) {
@@ -127,8 +127,7 @@ export function useCookieConsent(props: CookieConsentReactProps): CookieConsentR
           return Promise.resolve(false);
         }
         createHasBeenCalled.current = true;
-        instanceRef.current = await CookieConsentCore.create(siteSettings, mergedOptions);
-        forceRender();
+        await CookieConsentCore.create(siteSettings, mergedOptions);
         return Promise.resolve(true);
       };
       // useEffect cannot be async, so have to use this work-around
@@ -165,19 +164,19 @@ export function useCookieConsent(props: CookieConsentReactProps): CookieConsentR
     [elementId],
   );
 
-  const removePage = () => {
+  const removePage = useCallback(() => {
     if (!instanceRef.current) {
       return;
     }
     instanceRef.current.removePage();
-  };
+  }, []);
 
-  const removeBanner = () => {
+  const removeBanner = useCallback(() => {
     if (!instanceRef.current) {
       return;
     }
     instanceRef.current.removeBanner();
-  };
+  }, []);
 
   return {
     isReady: readyRef.current && !!instanceRef.current,

packages/react/src/components/cookieConsent/hooks/useCookieConsentEvents.ts

@@ -1,4 +1,5 @@
-import { MutableRefObject, useEffect, useMemo, useRef } from 'react';
+import { useEffect, useMemo } from 'react';
+import { noop } from 'lodash';
 
 import { isSsrEnvironment } from '../../../utils/isSsrEnvironment';
 import { cookieEventType } from '../../cookieConsentCore/cookieConsentCore';
@@ -18,20 +19,13 @@ export type CookieConsentEventsReturnType = () => void;
 
 export function useCookieConsentEvents(props: CookieConsentEventsProps): CookieConsentEventsReturnType {
   const { onChange, onReady, onMonitorEvent } = props;
-  const listenerDisposer: MutableRefObject<(() => void) | null> = useRef(null);
-
-  useMemo(() => {
-    if (listenerDisposer.current) {
-      listenerDisposer.current();
-      listenerDisposer.current = null;
-    }
-
+  const [attach, dispose] = useMemo(() => {
     if (!onChange) {
-      return () => undefined;
+      return [noop, noop];
     }
 
     if (isSsrEnvironment()) {
-      return () => undefined;
+      return [noop, noop];
     }
 
     const getChangeProps = (e: Event): CookieConsentChangeEvent => {
@@ -59,29 +53,27 @@ export function useCookieConsentEvents(props: CookieConsentEventsProps): CookieC
       onReady();
     };
 
-    window.addEventListener(cookieEventType.CHANGE, cookieListener);
-    window.addEventListener(cookieEventType.MONITOR, monitorListener);
-    window.addEventListener(cookieEventType.READY, readyListener);
+    const addEventListeners = () => {
+      window.addEventListener(cookieEventType.CHANGE, cookieListener);
+      window.addEventListener(cookieEventType.MONITOR, monitorListener);
+      window.addEventListener(cookieEventType.READY, readyListener);
+    };
 
-    const disposer = () => {
+    const removeEventListeners = () => {
       window.removeEventListener(cookieEventType.CHANGE, cookieListener);
       window.removeEventListener(cookieEventType.MONITOR, monitorListener);
       window.removeEventListener(cookieEventType.READY, readyListener);
-      listenerDisposer.current = null;
     };
 
-    listenerDisposer.current = disposer;
-
-    return disposer;
+    return [addEventListeners, removeEventListeners];
   }, [onChange, onMonitorEvent, onReady]);
 
   useEffect(() => {
+    attach();
     return () => {
-      if (listenerDisposer.current) {
-        listenerDisposer.current();
-      }
+      dispose();
     };
   }, []);
 
-  return listenerDisposer.current || (() => undefined);
+  return dispose;
 }

site/src/docs/components/cookie-consent/api.mdx

@@ -180,13 +180,13 @@ Events are dispatched with `window.dispatchEvent` and can be listened with `wind
 
 The `hds-cookie-consent-ready` callback is not called with any arguments. Other callback receive the same arguments.
 
-| Property                                             | Description                                                                                      | Type       | Default |
-| ---------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ---------- | ------- |
-| `type`                                               | Type of the event. Event types are listed in <InternalLink href="#events">events</InternalLink>. | `string`   | -       |
-| `acceptedGroups`                                     | Array of accepted group names.                                                                   | `string[]` | `[]`    |
-| `storageType`                                        | Only in monitor events. Type of storage where the unapproved item was found.                     | `string`   | -       |
-| `storageKeys`                                        | Only in monitor events. Keys of the unapproved items.                                            | `string[]` | -       |
-| [Table 12: Properties of the useCookieConsentEvents] |
+| Property                                               | Description                                                                                      | Type       | Default |
+| ------------------------------------------------------ | ------------------------------------------------------------------------------------------------ | ---------- | ------- |
+| `type`                                                 | Type of the event. Event types are listed in <InternalLink href="#events">events</InternalLink>. | `string`   | -       |
+| `acceptedGroups`                                       | Array of accepted group names.                                                                   | `string[]` | `[]`    |
+| `storageType`                                          | Only in monitor events. Type of storage where the unapproved item was found.                     | `string`   | -       |
+| `storageKeys`                                          | Only in monitor events. Keys of the unapproved items.                                            | `string[]` | -       |
+| [Table 12: Properties of the CookieConsentChangeEvent] |
 
 ### CSS variables