Getting Maximun call stack In production.

I’m getting maximum call stack in production but during dev, it’s working fine. Follow is the code I’m using.

import React, { useEffect } from 'react';
import { useTable, usePagination, useSortBy, useRowSelect } from 'react-table';
import Arrow from '../../assets/img/arrow.png';
import SortArrow from '../../assets/img/downarrow.png';
export default function Table({ columns = [], data = [], _setSelected }) {

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    // rows,
    prepareRow,
    pageOptions,
    page,
    state: { pageIndex, selectedRowPaths },
    previousPage,
    nextPage,
    canPreviousPage,
    canNextPage,
    selectedFlatRows
  } = useTable(
    {
      columns,
      data,
      disableSortRemove: true,
    },
    useSortBy,
    useRowSelect,
    usePagination
  );

  useEffect(
    () => {
      _setSelected(selectedFlatRows);
    },
    [selectedRowPaths, selectedFlatRows]
  );

  return (
    <>
      <div className="table-responsive">
        <table
          {...getTableProps()}
          className="w-100 table table-bordered table-striped table-hover"
        >
          <thead>
            {headerGroups.map((headerGroup) => (
              <tr {...headerGroup.getHeaderGroupProps()}>
                {headerGroup.headers.map((column) => (
                  <th scope="col" {...column.getHeaderProps(column.getSortByToggleProps())}>
                    {column.render('Header')}
                    {column.isSorted && <img src={SortArrow} width="18" className={column.isSortedDesc?'':'rotate-up'} alt="sorting" />}
                  </th>
                ))}
              </tr>
            ))}
          </thead>
          <tbody {...getTableBodyProps()}>
            {page.map((row, i) => {
              prepareRow(row);

              return (
                <tr {...row.getRowProps()}>
                  {row.cells.map((cell) => {
                    return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>;
                  })}
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
            {data.length > 10 && <>
      <div className="text-center">
        Page{' '}
        <em>
          {pageIndex + 1} of {pageOptions.length}
        </em>
      </div>
      <div className="text-center">
        <button
          className="btn btn-primary"
          onClick={() => previousPage()}
          disabled={!canPreviousPage}
        >
          <img src={Arrow} className="previous-arrow" alt="Previous" />
        </button>
        <button
          className="btn btn-primary"
          onClick={() => nextPage()}
          disabled={!canNextPage}
        >
          <img src={Arrow} className="next-arrow" alt="Next" />
        </button>
      </div>
      </>}
    </>
  );
}

[iAmGhost]

… It worked for me because i didn’t really need that selectedRows in the parent component state, but what if i really needed it ? How can i solve this ? 'Cause i think i’m gonna soon need it.

EDIT : i’m using "react-table": "^7.0.0-rc.15"

I’ve found workaround for this issue, insipred by this conversation

First you have to set initialState.selectedRowIds but make sure it’s never recreated during render:

const INITIAL_SELECTED_ROW_IDS = {};

const DataTable = ({ data, columns, onSelectedRowChange }) => {
    const {
        getTableProps,
        page,
        prepareRow,
        headerGroups,
        pageCount,
        gotoPage,
        state: { pageIndex, selectedRowIds },  // selectedRowPaths is renamed to selectedRowIds
    } = useTable(
        {
            data,
            columns,
            initialState: {
                pageSize: pageSize,
                selectedRowIds: INITIAL_SELECTED_ROW_IDS  // Do not just use {}
            }
        },

...

and re-implement selectedFlatRows’s behavior like this:

import { useMountedLayoutEffect } from "react-table";
...

    useMountedLayoutEffect(() => {
        const selectedIds = Object.keys(selectedRowIds);
        var selectedRowsData = selectedIds
            .map(x => data[x])
            .filter(function(x) {
                return x != null;
            });

        onSelectedRowChange(selectedRowsData);
    }, [onSelectedRowChange, selectedRowIds]);

[austincondiff]

I am running into this issue as well. It runs regardless of whether or not a selection was made.