Why does it render twice?

So I've exhausted everything and tried looking online. I'm trying to figure out why in my it renders twice. How can I set strictMode to false if this is the case?Thank you. This is the source code is attached so is the console
AppName -
src -
app -
page.tsx

Berndy•12/12/23, 6:18 PM

I dont think this "renders" twice.

If you'd put the console.log in the component itself, it should only be called once (or rather once in your console for the serverside render, and once in your browser).

But yes the useEffect is called twice in dev mode, which is done by Reacts strict mode, as you already mentioned. This is to check for weird sideeffects and cleanup issues i think? Some react apps have a <React.StrictMode> Wrapper in their app.js or index.js, create-t3-app seems to have a config flag in next.config.mjs you can disable

Berndy•12/12/23, 6:21 PM

– React

The library for web and native user interfaces

barry•12/12/23, 6:32 PM

Just leave it.

Bbarry Just leave it.

timelessOP•12/12/23, 6:38 PM

I can't leave it as this code is isolated for something I was doing beforehand where im duplicating a circle twice.

Berndy•12/12/23, 6:42 PM

i suppose although it is really annoying, this is exactly what this is intended to catch though

Following the useEffect conventions you would have to return a function that removed those circles again so that the second invokation can recreate them, without there being 4 after

BBerndy I dont think this "renders" twice. If you'd put the console.log in the compone...

timelessOP•12/12/23, 6:43 PM

Thank you!

This seemed to work :pppppppp

Berndy•12/12/23, 6:45 PM

BBerndy ```js useEffect(() => { const circle = createCircle(); return () => { ...

timelessOP•12/12/23, 6:57 PM

In my case I want my circles(nodes) to be displayed and not removed. Sorry for the noob question however why would you want to createCircle and instantanouesly remove it afterwards?

barry•12/12/23, 6:58 PM

It's a cleanup function

Berndy•12/12/23, 7:08 PM

yup, you need a cleanup function that removes the nodes again before the second invokation of useEffect recreates them. Very simplifies it would a bit like this

Berndy•12/12/23, 7:09 PM

but since you are using redux to save these nodes globally, you could also give each node a unique ID, so that dispatching ADD_NODE again with the same ID will just do nothing

Berndy•12/12/23, 7:11 PM

or you introduce a SET_NODES event, where you just dispatch the array of new nodes to be replaced

BBerndy but since you are using redux to save these nodes globally, you could also give ...

Berndy•12/12/23, 7:13 PM

but i would probably try something like that, if you recreate data you might cause some weird flickering as it rerenders the component or whatever? but thats just my intuition, might not make a difference in the end