useEffect rendering form from script twice on load?

Question

I am using a hubspot form in my next.js site - I want to render the form on page load as you can see in the code.

The undesired effect is that the form renders twice, I want to build in a system so it only renders on page load and thats it. How do I achieve this?

I tried to follow this to solve it but did not work https://www.youtube.com/watch?v=KzH6YxW0zW4.

Code below

    useEffect(() => {
        let isCancelled = false;

        const script = document.createElement('script');
        script.src = "//js-eu1.hsforms.net/forms/v2.js";
        document.body.appendChild(script)
        
        if (!isCancelled) {
            script.addEventListener('load', () => {
                if (window.hbspt){
                    hubspotForm();
                }
            })
        }

        return () => {
            isCancelled = true
        };
    }, [])

Does this answer your question? [React 18, useEffect is getting called two times on mount](https://stackoverflow.com/questions/72238175/react-18-useeffect-is-getting-called-two-times-on-mount) — Youssouf Oumar, Aug 13 '22 at 17:31

score 2 · Answer 1 · answered May 25 '22 at 23:33

Removing strict mode is something that you should not prefer. I believe if you do this:

  useEffect(() => {


    const script = document.createElement('script');
    script.src = "//js-eu1.hsforms.net/forms/v2.js";
    document.body.appendChild(script)
    const listener=() => {
            if (window.hbspt){
                hubspotForm();
            }
        }
        script.addEventListener('load', listener)


    return () => {
       script.removeEventListener('load',listener)
    };
}, [])

it should work fine. I prepared a detailed explanation of the topic (why useEffect is running twice and how to handle it.) here if you might want to have a look. Removing Strict mode is an easy out way but you should not choose it.

score 0 · Answer 2 · answered May 25 '22 at 13:45

0

Remove strict mode from your index.js, that should do the trick.

answered May 25 '22 at 13:45

Mhiko Leeps

53
5

Awh is it really that simple - so in production it wont render twice? – Michael Stubbs May 25 '22 at 13:46
Try it out Michael and see if it works. – Mhiko Leeps May 25 '22 at 13:51
Yes I changed the config in next.config.js to turn of strictmode and it renders twice still maybe its a hubspot issue – Michael Stubbs May 25 '22 at 14:06
it's a react18 issue sometimes the concurrent state update can cause it to render more than once even in production built, You can refer to this video to fix this issue : https://www.youtube.com/watch?v=VvuXkRnZi8g – Rhythm May 25 '22 at 16:39

score 0 · Answer 3 · answered May 25 '22 at 13:48

0

check the version of react and react-dom in the package.json file if you're using the lastest version of react v18. Because of the react strict mode and concurrrent rendering feature it executes the useEffect() hook to run twice even the if you set an empty dependency array.

you can disable react strictmode from next.config.js file

it should help to fix your problem

answered May 25 '22 at 13:48

Rhythm

106
4

Yes I changed the config in next.config.js to turn of strictmode and it renders twice still maybe its a hubspot issue – Michael Stubbs May 25 '22 at 14:06
did you restarted your dev server after changing the `next.config.js` file ? – Rhythm May 25 '22 at 16:36

score 0 · Answer 4 · answered May 25 '22 at 14:21

You can do something like this:

useEffect(() => {
  // check whether the script is present already
  if (document.getElementById('your-script-id')) return;
  
  let isCancelled = false;

  const script = document.createElement('script');
  // add an id here
  script.id = "your-script-id";

  // the rest of your code
}

Also, check that you're not re-mounting your component, the fact that your script is triggered twice suggests that somewhere outside your component is re-mounted on load, which might cause performance issues.

useEffect rendering form from script twice on load?

4 Answers4