Maximum update depth exceeded: React warning occasionally

[rmrbytes]

The console occasionally shows the following warning indicating some sort of infinite rendering. The error message is:

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.

I am using this wonderful component in the following manner. Key code has been shown

// component
import ...

const Component = (props) => {

  useEffect(() => {
    const populateSheet = () => {
         // logic to read props data and put it into array
        // required by SS
       return data
    }
    setData(populateSheet())
  }, [])

  return (
     <Spreadsheet
            hideColumnIndicators={true}
            hideRowIndicators={true}
            data={data}
            onChange={setData} />
   )   
}

I find that the error shows up when I blank out a cell in the spreadsheet. Not everytime but occasionally. Thanks

[rmrbytes]

The warning shows up when I place the cursor in a cell and use the Backspace key on Chrome browser (v 107.0.xxx) in Desktop

[iddan]

Thank you for reporting

[coopslarhette]

also running into this, seems to happen when the value for two cells is the same I think

is value used as a key prop anywhere?

[EdoardoGruppi]

Hello,

I've just submitted a pull request to address this issue. To fix it on your end before my pull request is accepted and merged into the main project, you can follow these steps:

1. Clone the branch where I made the modifications:

   git clone -b fix-maximum-update-depth-exceeded https://github.com/EdoardoGruppi/react-spreadsheet.git
   

2. Install the necessary packages using npm:

   npm install
   

   If the packages "@typescript-eslint/eslint-plugin" and "@typescript-eslint/parser" cause any issues, simply remove them from the package.json file and run npm install again.

3. Build the project to generate the dist folder:

   npm run build
   

4. Replace the existing dist folder inside node_modules/react-spreadsheet with the newly created one.

If there's any caching involved, make sure to clear it before running your code again. For example, if you're using Vite, delete the .vite folder inside node_modules.

For more details on the changes made, you can refer to my pull request here.