Theo's Typesafe Cult•12mo ago

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

10 Replies

Berndy•12mo ago

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•12mo ago

– React

The library for web and native user interfaces

barry•12mo ago

Just leave it.

timelessOP•12mo ago

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

Berndy•12mo ago

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

timelessOP•12mo ago

Thank you! This seemed to work :pppppppp

Berndy•12mo ago

useEffect(() => {
    const circle = createCircle();

    return () => {
        removeCircle(circle);
    }
}, []);

useEffect(() => {
    const circle = createCircle();

    return () => {
        removeCircle(circle);
    }
}, []);

timelessOP•12mo ago

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•12mo ago

It's a cleanup function

Berndy•12mo ago

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

useEffect(() => {
    const nodes = urlNodes.map(urlNode => {
        return createNode(urlNode);
    })

    nodes.forEach(node => {
        dispatch({
            type: 'ADD_NODE',
            payload: node,
        })
    })

    return () => {
        nodes.forEach(node => {
            dispatch({
                type: 'REMOVE_NODE',
                payload: node,
            })
        })
    }
}, []);

useEffect(() => {
    const nodes = urlNodes.map(urlNode => {
        return createNode(urlNode);
    })

    nodes.forEach(node => {
        dispatch({
            type: 'ADD_NODE',
            payload: node,
        })
    })

    return () => {
        nodes.forEach(node => {
            dispatch({
                type: 'REMOVE_NODE',
                payload: node,
            })
        })
    }
}, []);

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 or you introduce a SET_NODES event, where you just dispatch the array of new nodes to be replaced 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

Gaming

Programming

Why does it render twice?