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