How to avoid Maximum update depth exceeded Reactjs

Question

I tried to display some csv content in reactjs application using below code. when i click the button it should call the api and get the response.i need to show the response in table formate and when i submit i need to save the data. Getting response and Saving is working fine for me but my issue is when i click the side menu to for fetch the selected data my state not updating properly to display the selected value data i need to click more than three times. so i tried with useeffect its with dependency its wokring fine . but its showing memory issue. i am new to react i tried many ways its showing maximum exceed error. so how to fix it in below code

const Parameters = ({ selectedtestcaseId, hideTestTab }) => {

  const [csvattachment, setcsvattachment] = useState({})
  const [slectedattachementId, setslectedattachementId] = useState()
  const [viewcsv, setviewcsv] = useState()
 

  const [csvHead, setcsvHead] = useState([])
  const [csvformFields, setcsvformFields] = useState([{}])
  const [formatData, setformatData] = useState([])

  const formatCsv = () => {
    console.log(csvHead)
    if (viewcsv) {
      let splitVlaues = viewcsv?.split('\r\n')
      setcsvHead(splitVlaues[0]?.split(','))
      let allData = []
      for (let i = 1; i < splitVlaues.length - 1; i++) {
        let a = splitVlaues[i].split('"');
        let filteredValue = a.filter(x => x && x != ',');
        allData.push(filteredValue)

      }
      setformatData(allData)
      var newval = formatData.map(val => {
        return val.reduce((result, field, index) => {
          result[csvHead[index]] = field;
          return result;
        }, {})
      })
      setcsvformFields(newval)
    }
  }


  useEffect(() => {
    formatCsv()
  }, [csvformFields])
  

  return (
    
                <table className="table table-striped table-bordered parameter-display">
                  <thead>
                    <tr>
                      {csvHead.map((val, i) => <td key={i}>{val}</td>)}
                    </tr>
                  </thead>
                  <tbody>
                    <>
                      {csvformFields?.map((d, index) => (
                        <tr>
                          {Object.keys(d).map(prop => (
                            <>
                              <td><input type="text" name={prop} value={d[prop]} onChange={(e) => handleFormChange(index, e)} /></td>

                            </>
                          ))}
                        </tr>
                      ))}
                    </>
                  </tbody>
                </table>
              
  )
}

---

My in input is

in variable "viewcsv" ie  const [viewcsv, setviewcsv] = useState()

/
    criteriass,criteriaCountry,criteriaCountryState
    "5G,NewZealand","5G,New Zealand ","5G,New Zealand "
    "5G,NewZealand","5G,New Zealand ","5G,New Zealand "
    "5G,NewZealand","5G,New Zealand ","5G,New Zealand "

/


2)   const [csvHead, setcsvHead] = useState([])

       csvHead hold ['criteriass','criteriaCountry']
       
3)  const [formatData, setformatData] = useState([])

      formatData and allData hold 
           [
            [
                "5G,NewZealand",
                "5G,New Zealand "
            ]
           ]

4) const [csvformFields, setcsvformFields] = useState([{}])

    csvformFields and newval hold  
    
    [
        {
            "criteriass": "5G,NewZealand",
            "criteriaCountry": "5G,New Zealand "
        }
    ]
    
My issue is after i try to use csvformFields in my html its not loading

after use useEffeect with csvformFields as dependency its working. but throwing infinite loop.

How to fix the above. How to make state change reflect immeditaly

---

I tried to call "csvformFields" using useEffect its thrwoing maximum exceed error and also i tried with "csvHead " varibale still the same.. How can i fix the maxmium exceed error in the above code . where i am making the mistake. which variable i need to add as dependency array in useEffect and why??

below is the error which i am getting

*

Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render

*

Answer 1

The issue comes from your useEffect

useEffect(() => {
    formatCsv()
}, [csvformFields])

Here you call out a function called formatCsv whenever the value of csvformFields changes. Inside the formatCsv function you call out setcsvformFields that changes the value of csvformFields. That creates an infinite loop:

useEffect calls formatCsv -> formatCsv changes csvformFields value -> useEffect dependency array trigers and calls the formatCsv function -> formatCsv changes csvformFields value -> so on and so on.

The fix is to fix the dependency array or useEffect. The formatCsv only depend on 3 values - viewcsv formatData and csvHead. They what define csvformFields value. So dependency array should be set to those - not the csvformFields.

useEffect(() => {
    formatCsv()
}, [viewcsv, formatData, csvHead])

BUT that wont solve the issue as the infinite loop will still persist. Its down to the flaw of formatCsv function. inside you have setState functions for setformatData and setcsvHead states. Why? I got no clue.

Setting a state and then in the function trying to get the newest value? that wont work. Once a function is executed the values of states inside the function cycle will remain the same no matter how much u change em. so just make them into a variable.

Overall you need to refactor the entire flow. The code is a mess - no proper formatting, dosent follow the standard programing namings, etc. + you HEAVILY rely on SOOO many different states its absurd.

tl;dr; the issue is by setting the wrong useEffect dependency, having too many states and a bad formatCsv function design.