Real time data fetching from mysql using Axios in react js - real-time

Question

I am new to react and I'm having some challenges, I want to have real time updating ui using data (complex json object) fetched from a mysql database using axios in react. I was using useEffect to handle the UI rerender however I am having challenges because its causing infinite rerendering, the json data is too complex for the useEffect dependency array. Which approach should I use, will sockets help?
useEffect(() => {
let isMounted = true;
Axios.post('http://localhost:3001/update_irrigation', {
sql: sql
}).then(res => {
if (isMounted) setIrrigator(res.data.results);
})
.catch(err => {
console.log(err);
})
return () => { isMounted = false };
})
here is a sample of the json object array, which is dynamic :
[
{
"ID": 9,
"Sensor_1": 9,
"Sensor_2": 65,
"Sensor_3": 43,
"Sensor_4": 35,
"Sensor_5": 55,
"Sensor_6": 56,
"Sensor_7": 12,
"Sensor_8": 32,
"Sensor_9": 90,
"Sensor_10": 99,
"Solenoid_1": "open",
"Solenoid_2": "open",
"Solenoid_3": "closed",
"Solenoid_4": "closed",
"Solenoid_5": "open",
"Time": "2022-02-17T14:27:49.000Z"
},
{
"ID": 5,
"Sensor_1": 40,
"Sensor_2": 3,
"Sensor_3": 4,
"Sensor_4": 12,
"Sensor_5": 43,
"Sensor_6": 56,
"Sensor_7": 12,
"Sensor_8": 32,
"Sensor_9": 90,
"Sensor_10": 99,
"Solenoid_1": "open",
"Solenoid_2": "open",
"Solenoid_3": "closed",
"Solenoid_4": "closed",
"Solenoid_5": "open",
"Time": "2022-02-17T05:00:00.000Z"
}
]

Answer 1

O you should add an empty array ([]) immediately after the return function that should stop multiple re-rendering
useEffect=()=>{
Do something,
return function {}
, []}