xxxxxxxxxx
StrictMode renders components twice (on dev but not production) in order to detect any problems with your code and warn you about them (which can be quite useful).
Situated normally in main.jsx:
<React.StrictMode></React.StrictMode>
xxxxxxxxxx
//change in next.config.js file by default it on turn of this to
reactStrictMode: false,
xxxxxxxxxx
const initialized = useRef(false)
useEffect(() => {
if (!initialized.current) {
initialized.current = true
// Actual effect logic...
}
}, [])
xxxxxxxxxx
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);// to avoid that useEffect get executed twice you have to remove React.StrictMode
xxxxxxxxxx
// Please check your index.js
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// Remove the <React.StrictMode> wrapper you should now fire once
root.render(
<App />
);
xxxxxxxxxx
root.render(
<App />
);//modify index.js like this, becauce React StrictMode renders components twice on dev server