React app with axios inside useEffect() is rendering twice - axios

Question

I've been trying to figure out why my function that draws a BPMN diagram is rendering the diagram twice. I have looked at various examples using axios inside useEffect but cannot figure out why it is happening. The url is returning a valid xml for the viewer.
Can anyone give me some guidance?
Here is the entire function
function RenderBPMN(pathDefinition) {
const [diagram, setDiagram] = useState("");
const container = document.getElementById("container");
const msg = JSON.stringify(pathDefinition);
const url = `http://localhost:9090/xml?path=${msg}`;
useEffect(() => {
const fetchData = async () => {
axios
.get(url)
.then((resp) => {
setDiagram(resp.data);
})
.catch ((error) => {
console.log(error);
});
};
fetchData();
}, [url]);
if (diagram.length > 0) {
const viewer = new Viewer({
container,
keyboard: {
bindTo: document
}
});
viewer
.importXML(diagram)
.then(({ warnings }) => {
if (warnings.length) {
console.log("Warnings", warnings);
}
viewer.get('canvas').zoom('fit-viewport');
})
.catch((err) => {
console.log("error", err.message);
});
}
return (
<div
id="container"
style={{
border: "1px solid #010101",
height: "50vh",
width: "70vw",
margin: "auto"
}}
></div>
);
}
export default RenderBPMN;

Answer 1

Remove url from useEffect array. With empty array it will by called only once when component will be mounted.
useEffect( () => {
// your code
}, [ /* empty */ ])