Berndy Comments - Answer Overflow

Berndy

•Created by timeless on 12/12/2023 in #questions

Why does it render twice?

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

15 replies

TTCTheo's Typesafe Cult

•Created by timeless on 12/12/2023 in #questions

Why does it render twice?

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

15 replies

TTCTheo's Typesafe Cult

•Created by timeless on 12/12/2023 in #questions

Why does it render twice?

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

15 replies

TTCTheo's Typesafe Cult

•Created by timeless on 12/12/2023 in #questions

Why does it render twice?

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

15 replies

TTCTheo's Typesafe Cult

•Created by timeless on 12/12/2023 in #questions

Why does it render twice?

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

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

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

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

15 replies

TTCTheo's Typesafe Cult

•Created by timeless on 12/12/2023 in #questions

Why does it render twice?

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

15 replies

TTCTheo's Typesafe Cult

•Created by timeless on 12/12/2023 in #questions

Why does it render twice?

15 replies

TTCTheo's Typesafe Cult

•Created by timeless on 12/12/2023 in #questions

Why does it render twice?

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

15 replies

Gaming

Programming