cookieconsent: Bug: plugin is executed twice inside the `useEffect` hook in React

s, it seems that v3.0 is required to get it to work properly.

Not really. React 18 made things just a little more “complicated”, especially for iife + client only plugins such cookieconsent v2.

@itsam, this is the easiest way to use v2 in next.js (call api via the window object): https://stackblitz.com/edit/nextjs-euxk9k?file=components%2FCookieConsentComponent.js

I’ll update the FAQ -> How to use in React section for future users.

I use the API this way with Next.js:

import { useEffect, createContext, useContext } from "react"
import "vanilla-cookieconsent/dist/cookieconsent.js"
import "vanilla-cookieconsent/dist/cookieconsent.css"

const CookieContext = createContext();

const CookieConsentProvider = ({ children, locale }) => {
  const cc = window.initCookieConsent();
  useEffect(() => {
    cc.run({
       autorun: true,
       current_lang: locale,
       autoclear_cookies: true,
       page_scripts: true,
       // your config goes here
    });
  }, [locale]);

    return (
        <CookieContext.Provider value={{ cc }}>
            {children}
        </CookieContext.Provider>
    );
}

export default CookieConsentProvider

export function useCookieConsent() {
    const context = useContext(CookieContext);
    if (context === undefined) {
      throw new Error('Context must be used within a Provider');
    }
    return context;
}

Then in my page component:

const CookieConsentProvider = dynamic(() => import('components/CookieConsentProvider'), {
  ssr: false,
})

export default function Page() {
return (
    <CookieConsentProvider locale={locale}>
       <Layout>
         ...
       </Layout>
    </CookieConsentProvider>
  )
}

Then in any child component I can do the following:

import { useCookieConsent } from 'components/CookieConsentProvider'

const MyComponent = () => {
   const { cc } = useCookieConsent()

  const handleClick = () => {
     cc.accept('marketing')
  }
}

s, it seems that v3.0 is required to get it to work properly.

Not really. React 18 made things just a little more “complicated”, especially for iife + client only plugins such cookieconsent v2.

@itsam, this is the easiest way to use v2 in next.js (call api via the window object): https://stackblitz.com/edit/nextjs-euxk9k?file=components%2FCookieConsentComponent.js

I’ll update the FAQ -> How to use in React section for future users.

You are, right, in the proposed solution, everything works as expected in stable release 2.8.6. I think the tricky part (besides limiting to load just once in the useEffect) was to use window (e.g. window.CookieConsentApi.showSettings(0)) all the times instead of the object (e.g. cc) which either created once in the context, zustand or wherever.

Thanks a lot for clarifying and giving a functional example, I am pretty sure it will be helpful for others trying to integrate with next.js

Released v3.0.0-rc.6, feel free to re-open this issue if you still encounter the problem.

@Polynook

that is indeed the proper way to use the plugin.

I believe this issue is caused by React’s new useEffect behaviour; the useEffect hook is executed twice in dev/strict mode and messes up the plugin.

As for the types issue, it has already been fixed in the v3 branch https://github.com/orestbida/cookieconsent/commit/93ccc795406f9c42528d22c8a17da890d2857f30.

Note: you could also use named imports

import { run, acceptCategory } from 'vanilla-cookieconsent'