React-table in Material UI Dialog causes "Error: Maximum update depth exceeded. " when selecting a row and exporting it via useMountedLayoutEffect

Question

i am getting an Error, when selecting a row in my react-table. The problem is (probably) caused by an infinite rerendering loop. The process is as follows:

1. I want to select a row.
2. The react-table uses the useMountedLayoutEffect() Method to notice if the const selectedFlatRows (list of all selected rows) has changed.
3. The useMountedLayoutEffect() then calls a method that should export all selected rows. The called Method is given to the table component by its parent using props. The function is as simple as follows:

        useMountedLayoutEffect(() => {
            exportSelectedRows(selectedFlatRows)
        }, [selectedFlatRows]);

4, The parent component of the react-table is an material UI Dialog. The dialog is basically only the table component. The dialog code looks as the this;

    function AddCodesToCaseDialog(props) {
        const [selectedCodes, setSelectedCodes] = React.useState("test");


        const columns = React.useMemo(
            () => [

                {
                    Header: 'Code',
                    accessor: 'code',
                },
                {
                    Header: 'Beschreibung',
                    accessor: 'description',
                },

            ],
            []
        )
        const data = [
            {
                code: "R111",
                description: "asdasasgsgeqea"
            },
            {
                code: "R12131",
                description: "YYYYYYYYYYa"
            }, {
                code: "as111",
                description: "XXXXXXXXXXXXXXa"
            }, {
                code: "CC111",
                description: "BBBBBBfa"
            },
            {
                code: "R1sss2131",
                description: "YYYYYYyycYYYYa"
            }, {
                code: "asddd111",
                description: "XXXXXyyyXXXXXXXXXa"
            }, {
                code: "CCggg111",
                description: "BBBgggBBBfa"
            },
        ]



        const handleCloseModal = () => {
            props.setOpen(false);
        };


        const dialogContent = (
            <Container>
                <div style={{
                    maxWidth: "100%",
                    width: "1000px",
                    minHeight: "500px",
                    flexGrow: 1,
                    position: "relative",
                }}>
                    <MMTable columns={columns} data={data} tableName={"Verfügbare Codes:"}
                             modalView={true}
                             withBorder={false}
                             exportSelectedRows={(selectedRows) => {
                                 setSelectedCodes(selectedRows.map((entry, index) => entry.values))
                             }}/>

                </div>

                <pre>{JSON.stringify(selectedCodes, null, 2)}</pre>

            </Container>
        )


        const dialogActions = [
            <StyledButton onClick={(event) => {
            }}>Abbrechen</StyledButton>,
            <StyledButton onClick={(event) => {
            }}>Auswahl hinzufügen</StyledButton>
        ]

        return (
            <ResponsiveDialogSkeleton openModal={props.open}
                                      handleCloseModal={handleCloseModal}
                                      dialogTitle={"Codes hinzufügen"}
                                      dialogContent={dialogContent}
                                      dialogActions={dialogActions}

            />
        );
    }

    export default AddCodesToCaseDialog;

5. The dialog containing the Table is called using a button like this.

    const [openAddCodesToCaseDialog, setOpenAddCodesToCaseDialog] = React.useState(false);


    return (<div>
      <StyledButton onClick={() => {
                              debugger
                              setOpenAddCodesToCaseDialog(true)
      }}>Code hinzufügen</StyledButton>

      <AddCodesToCaseDialog open={openAddCodesToCaseDialog} setOpen={setOpenAddCodesToCaseDialog}/>

    </div>)

6. As soon as i select a row in the table, my screen freezes and after some time this error appears:

Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

It seems like i am running into an infinite rerendering loop, but i cannot find the issue. Does anyone have a suggestion on what i could possibly try to fox this?

Answer 1

It is very strange behavior and it is hint when using react-table select rows feature. That's work for me:

const tableInstance = useTable({
  columns,
  data,
  autoResetHiddenColumns: false,    //  <-- stops the rerendering 
  autoResetSortBy: false, //  <-- stops the rerendering 
}, useSortBy);

Answer 2

I did solve the Problem. Just forgot to use React.useMemo when creating the data array of the table.