Maximum call stack exceeded error when rendering columns dynamically (react-table@6.11.5)

[MalikBagwala]

Here is my data structures

Object of dcs

{
  "13": {
    "id": "13",
    "name": "xyz",
  },
  "14": {
    "id": "14",
    "name": "xyz 1",
  },
  "15": {
    "id": "15",
    "name": "xyz 2",
  },
  "16": {
    "id": "16",
    "name": "xyz 3",
  }
}

Array of items

[
{
  "id": "72",
  "name": "Vegetable Basket A",
  "codename": "100666",
  "stocks": {
    "13": {
      "currentStockCount": 1000,
      "holdStockCount": 0,
      "id": "24",
      "offerStockCount": 2000
    },
    "14": {
      "currentStockCount": 1000,
      "holdStockCount": 0,
      "id": "27",
      "offerStockCount": 2000
    },
    "15": {
      "currentStockCount": 1000,
      "holdStockCount": 0,
      "id": "26",
      "offerStockCount": 2500
    },
    "16": {
      "currentStockCount": 1000,
      "holdStockCount": 0,
      "id": "25",
      "offerStockCount": 1500
    }
  }
}
... 9 more items
]

And here is how they are ultimately rendered

const DC_COLUMNS = useMemo(() => {
    return Object.values(dcs).map((dc) => {
      return {
        width: 200,
        Header: dc?.name,
        // Basically only access the stock for the particular dc
        // This is the trouble line, the issue fades away after I remove dc.id
        accessor: `stocks.${dc.id}`,
        Cell({ value }) {
          const cs = value?.currentStockCount ?? 0;
          const hs = value?.holdStockCount ?? 0;
          const os = value?.offerStockCount ?? 0;
          return <StockRange cs={cs} hs={hs} os={os} />;
        },
      };
    });
  }, [dcs]);

<CustomReactTable
        pageSize={10}
        leftAlign
        loading={loading}
        data={items}
        columns={DC_COLUMNS}
      />

Steps To Reproduce (required)

1. Have a list of atleast 10 rows
2. Generate columns dynamically atleast 4

Screenshots

I am using react-table@6.11.5

[tannerlinsley]

Version 6 issues are no longer tracked in the main issues section of the Github repo. I'll convert this to a discussion for the community to help out with.

[MalikBagwala]

This would be great. and please do check this issue. This is the only problem I am having with the otherwise fantastic library

[MalikBagwala]

There was an issue with one of the <StockRange cs={cs} hs={hs} os={os} /> Components that was causing the error, this had nothing to do with react table. Its resolved.