Cannot stop useEffect() from executing - reactjs

Question

My application, pulls data ( text, numbers) from a database and then places them in a canvas image. This is working as expected, and the data is being displayed along with a few lines of the final diagram. However the useEffect() function is not stopping and continues to display the same image, which I would not have realised had I not placed an alert.
I have seen the documentation and other questions that have discussed this problem. I understand that I need to put a variable whose value will not change. But I am simply unable to do this. I am sharing my code. Will be grateful if someone can help.
import React, { useEffect, useState, useRef } from "react";
import { useParams } from "react-router";
import './cindex.css';
export default function GetChartData() {
const params = useParams();
const [dbdata, setData] = useState('empty52');
const canvas = useRef();
let ctx = null;
let name = null
let Lalong = null
let T1 = { text: 'dummy', x: 180, y: 100 }
let T2 = { text: 'dummy', x: 180, y: 200 }
useEffect(() => {
async function getData() {
const response = await fetch(`http://localhost:5000/getchartdata/${params.id.toString()}`);
//const response = await fetch(`http://khona21.cleverapps.io/getchartdata/${params.id.toString()}`);
if (!response.ok) {
const message = `An error occurred: ${response.statusText}`;
window.alert(message);
return;
}
const dbdata = await response.json();
setData(dbdata);
}
getData();
return;
},[dbdata]);
// initialize the canvas context
useEffect(() => {
// dynamically assign the width and height to canvas
const canvasEle = canvas.current;
canvasEle.width = canvasEle.clientWidth;
canvasEle.height = canvasEle.clientHeight;
// get context of the canvas
ctx = canvasEle.getContext("2d");
//}, []);
}, [T1,T2]);
useEffect(() => {
let pid = dbdata.pid;
let spid = JSON.stringify(pid);
if (typeof spid !== 'undefined'){
name = dbdata.pid.name;
Lalong = dbdata.GLon.La
if (T1.text === 'dummy') {
T1.text = name
T2.text = Lalong.toString()
}
}
else {
//window.alert('undefined')
}
drawLine({ x: 150, y: 20, x1: 150, y1: 450 });
drawLine({ x: 300, y: 20, x1: 300, y1: 450 });
writeText(T1);
writeText(T2);
window.alert('finished drawing')
//}, []);
//}, [[]]);
}, [T1]);
const drawLine = (info, style = {}) => {
const { x, y, x1, y1 } = info;
const { color = 'black', width = 1 } = style;
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x1, y1);
ctx.strokeStyle = color;
ctx.lineWidth = width;
ctx.stroke();
}
// write a text
const writeText = (info, style = {}) => {
const { text, x, y } = info;
const { fontSize = 20, fontFamily = 'Arial', color = 'black', textAlign = 'left', textBaseline = 'top' } = style;
ctx.beginPath();
ctx.font = fontSize + 'px ' + fontFamily;
ctx.textAlign = textAlign;
ctx.textBaseline = textBaseline;
ctx.fillStyle = color;
ctx.fillText(text, x, y);
ctx.stroke();
}
return (
<div>
<h3>Chart Positions</h3>
<p>{JSON.stringify(dbdata)}</p>
<hr></hr>
<canvas ref={canvas}></canvas>
</div>
);
}
I have tried to ensure that that the text in T1 changes only once and hence should stop the loop. But it is not. What should I do?

Answer 1

the TRICK was to use [dbdata.length] instead of simply [dbdata] as the stopping condition in the useEffect() function. dbdata was being set each time as new, but dbdata.length was not changing.
import React, { useEffect, useState, useRef } from "react";
import { useParams } from "react-router";
import './cindex.css';
//let T1 = { text: 'dummy', x: 180, y: 100 }
//let T2 = { text: 'dummy', x: 180, y: 200 }
export default function GetChartData() {
const canvas = useRef();
let ctx = null;
const params = useParams();
const [dbdata, setData] = useState('empty52');
let name = null
let Lalong = null
const T1 = { text: 'dummy', x: 180, y: 100 }
const T2 = { text: 'dummy', x: 180, y: 200 }
useEffect(() => {
async function getData() {
const response = await fetch(`http://localhost:5000/getchartdata/${params.id.toString()}`);
//const response = await fetch(`http://khona21.cleverapps.io/getchartdata/${params.id.toString()}`);
if (!response.ok) {
const message = `An error occurred: ${response.statusText}`;
window.alert(message);
return;
}
const dbdata = await response.json();
setData(dbdata);
// *********************************************************************
let pid = dbdata.pid;
let spid = JSON.stringify(pid);
if (typeof spid !== 'undefined'){
name = dbdata.pid.name;
Lalong = dbdata.GLon.La
T1.text = name
T2.text = Lalong.toString()
}
else {
//window.alert('undefined')
}
// dynamically assign the width and height to canvas
const canvasEle = canvas.current;
canvasEle.width = canvasEle.clientWidth;
canvasEle.height = canvasEle.clientHeight;
// get context of the canvas
ctx = canvasEle.getContext("2d");
drawLine({ x: 150, y: 20, x1: 150, y1: 450 });
drawLine({ x: 300, y: 20, x1: 300, y1: 450 });
writeText(T1);
writeText(T2);
window.alert('image drawn')
// **********************************************************************
}
getData();
return;
},[dbdata.length]);
const drawLine = (info, style = {}) => {
const { x, y, x1, y1 } = info;
const { color = 'black', width = 1 } = style;
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x1, y1);
ctx.strokeStyle = color;
ctx.lineWidth = width;
ctx.stroke();
}
// write a text
const writeText = (info, style = {}) => {
const { text, x, y } = info;
const { fontSize = 20, fontFamily = 'Arial', color = 'black', textAlign = 'left', textBaseline = 'top' } = style;
ctx.beginPath();
ctx.font = fontSize + 'px ' + fontFamily;
ctx.textAlign = textAlign;
ctx.textBaseline = textBaseline;
ctx.fillStyle = color;
ctx.fillText(text, x, y);
ctx.stroke();
}
return (
<div>
<h3>Chart Positions</h3>
<p>{JSON.stringify(dbdata)}</p>
<hr></hr>
<canvas ref={canvas}></canvas>
</div>
);
}