diff --git a/packages/react/src/components/cookieConsent/hooks/useCookieConsent.ts b/packages/react/src/components/cookieConsent/hooks/useCookieConsent.ts
index 2b270a57d1..7ac061c175 100644
--- a/packages/react/src/components/cookieConsent/hooks/useCookieConsent.ts
+++ b/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,
diff --git a/packages/react/src/components/cookieConsent/hooks/useCookieConsentEvents.ts b/packages/react/src/components/cookieConsent/hooks/useCookieConsentEvents.ts
index d19a064295..9bf6616d95 100644
--- a/packages/react/src/components/cookieConsent/hooks/useCookieConsentEvents.ts
+++ b/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;
}
diff --git a/site/src/docs/components/cookie-consent/api.mdx b/site/src/docs/components/cookie-consent/api.mdx
index 9d890f4ad6..5881588df6 100644
--- a/site/src/docs/components/cookie-consent/api.mdx
+++ b/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 events. | `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 events. | `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