useEffect rendering form from script twice on load? - reactjs

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
};
}, [])

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

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.