Error: Too many re-renders , when modifying an array

January 2, 2022

Getting error when modifying array through large number of iterations.

 data.logData1[0].data.map((values, index) => {
    var result = {};
    data.logData1[0].mnemonicList
      .split(",")
      .forEach((key, i) => (result[key] = values.split(",").map(Number)[i]));

    setGraphData([...graphData, result]); //Modifying Array (here comes trouble)

  });

>Solution :

Its difficult to say without code component, but I suspect that the problem lies in the fact that you are calling your state setter immediately inside the function component body, which forces React to re-invoke your function again, with the same props, which ends up calling the state setter again, which triggers React to call your function again…. and so on.

const resultData =  data.logData1[0].data.map((values, index) => {
    var result = {};
    data.logData1[0].mnemonicList
      .split(",")
      .forEach((key, i) => (result[key] = values.split(",").map(Number)[i]));

   return result

  });

// somewhere in your useEffect or in function

 setGraphData([...graphData, resultData]);