Triggers infinitely when placed in an array

[manuacl]

Hello,

Waypoint is already used on my project, I tried to implement it inside a table (with Material UI). The onEnter action then fires infinitely.

But if I remove the scroll from the table, and leave the browser's default scroll and place the Waypoint tag outside the table, the bug no longer occurs and everything works normally.

I wonder if it's due to react-waypoint or material-ui

Here is my code below, there are probably unnecessary rendering conditions, since I tested several things before realizing where the bug came from

  const handleEnter = () => {
    setQueryProps(({ page_size }) => ({
      page_size,
      next_token: data?.next_token,
      query_execution_id: data?.query_execution_id,
    }));
  };

  return (
    <>
      <Typography
        variant="h2"
        component="h2"
      >
        Reporting
      </Typography>

      <Box sx={style.wrapper}>
        <TableContainer sx={style.tableContainer}>
          <Table
            aria-label="sticky table"
            style={style.table}
          >
            <TableHead>
              <TableRow>
                {tableHeaders.map(({ accessor, label }) => (
                  <TableCell
                    key={accessor}
                    sx={style.tableHeaderCell}
                  >
                    {label}
                  </TableCell>
                ))}
              </TableRow>
            </TableHead>
            <TableBody sx={style.tableBody}>
              {reportList.map((item: ReportItemType) => (
                <TableRow
                  key={item.unique_row_number}
                  sx={style.tableRow}
                >
                  {tableHeaders.map(({ accessor }) => (
                    <TableCell key={accessor}>
                      {item[accessor]}
                    </TableCell>
                  ))}
                </TableRow>
              ))}
              {isLoading && (
                <CircularProgress />
              )}
              {!isLoading &&
                hasNextPage &&
                !error &&
                reportList.length > 0 &&
                page > 0 && (
                  <Waypoint
                    onEnter={handleEnter}
                    key={data?.next_token}
                  >
                    <CircularProgress />
                  </Waypoint>
                )}
            </TableBody>
          </Table>
        </TableContainer>
      </Box>
    </>
  );

[manuacl]

I just found a workaround, I just had to define Wapypoint in the <TableFooter> tag

const handleEnter = () => {
    setQueryProps(({ page_size }) => ({
      page_size,
      next_token: data?.next_token,
      query_execution_id: data?.query_execution_id,
    }));
  };

  return (
    <>
      <Typography
        variant="h2"
        component="h2"
      >
       Reporting
      </Typography>

      <Box sx={style.wrapper}>
        <TableContainer sx={style.tableContainer}>
          <Table
            stickyHeader
            aria-label="sticky table"
            style={style.table}
          >
            <TableHead>
              <TableRow>
                {tableHeaders.map(({ accessor, label }) => (
                  <TableCell
                    key={accessor}
                  >
                    {label}
                  </TableCell>
                ))}
              </TableRow>
            </TableHead>
            <TableBody sx={style.tableBody}>
              {reportList.map((item: ReportItemType) => (
                <TableRow
                  key={item.unique_row_number}
                  sx={style.tableRow}
                >
                  {tableHeaders.map(({ accessor }) => (
                    <TableCell key={accessor}>
                      {item[accessor]}
                    </TableCell>
                  ))}
                </TableRow>
              ))}
            </TableBody>
            <TableFooter>
              <TableRow>
                <TableCell
                  colSpan={tableHeaders.length}
                  style={{ border: "0", textAlign: "center" }}
                >
                  {isLoading && (
                    <CircularProgress />
                  )}
                  {!isLoading &&
                    data?.next_token &&
                    !error && (
                      <Waypoint
                        onEnter={handleEnter}
                        key={data?.next_token}
                      >
                        <CircularProgress />
                      </Waypoint>
                    )}
                </TableCell>
              </TableRow>
            </TableFooter>
          </Table>
        </TableContainer>
      </Box>
    </>
  );