React – Too many re-renders when using props


I have been doing a project where I present a graph on the screen. Now, the data state within the App.js is being passed as a prop and then causes an infinite loop error.

If the data variable is within the Graph.js file and used and defined within the useState, then there is no issue.

I was a bit uncertain why this was happening as I am relatively new to react and javascript.

The goal is to add the data to the graph, it loads, then when I change the data within the App.js file, the page will automatically load again with the new data.

Any help/advice will be much appreciated 🙂

App.js

function App() {
  const [data, setData] = useState(null)
  setData(
    {
    nodes:[
        {name:"Max"},
        {name:"George"},
        {name:"Jesus"},
        {name:"Ben"},
        {name:"James"},
        {name:"Sam"},
        {name:"Sassms"}
    ],

    edges:[
        {source:"Max", target:"George"},
        {source:"George", target:"Jesus"},
        {source:"Jesus", target:"Max"},
        {source:"Jesus", target:"Ben"},
        {source:"James", target:"Ben"},
        {source:"Sam", target:"Sassms"},
        {source:"Sam", target:"Ben"}
    ]
    })
    console.log(data)

  return (
    <Graph colour="Grey" data={data} setData={setData}/>
  );
}

Graph.js

function Graph(props) {
    const svgRef = useRef(null);
    useEffect(
        () => {
            let svg = d3.select(svgRef.current)
            if(svgRef.current) {// Check that svg element has been rendered
                let width = svg.attr("width")
                let height = svg.attr("height")

                d3.selectAll("svg > *").remove();

                let edge = svg
                    .append("g")
                    .selectAll("line")
                    .data(props.data.edges)
                    .enter()
                    .append("line")
                    .attr("stroke-width", function(d) {
                        return 3;
                    })
                    .style("stroke", "black")

                let node = svg
                    .append("g")
                    .selectAll("circle")
                    .data(props.data.nodes)
                    .enter()
                    .append("circle")
                    .attr("r", 7)
                    .attr("fill", function(d) {
                        return "grey";
                    })
                    .attr("stroke", "black")
            }

    }, [props.data])

    
    return (
        <svg ref={svgRef} id="svgID" width="1000" height="900"></svg>
    )
  }

Source: JavaSript – Stack Overflow

November 24, 2021
Category : News
Tags: D3.js | javascript | reactjs

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.