T
TanStack•2y ago
vicious-gold

Table freezes with observable from MobX

I've got a project with mobx-state-tree (https://mobx-state-tree.js.org/intro/welcome) and Tanstack Table. The following components freezes completely when I have the page including it open and I create a new item. observer() is from mobx-react-lite. I believe the problem is some infinite loop due to not memoizing the data, but all my attempts have not helped. Any ideas?
Welcome to MobX-State-Tree! · MobX-state-tree
3 Replies
vicious-gold
vicious-goldOP•2y ago
export const StakeholderTable = observer(() => {
  const { stakeholders } = useStore();
  const data = stakeholders;
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });
  return (
    <Table>
      <Table.Thead>
        {table.getHeaderGroups().map((headerGroup) => (
          <Table.Tr key={headerGroup.id}>
            {headerGroup.headers.map((header) => (
              <Table.Th key={header.id}>
                {header.isPlaceholder
                  ? null
                  : flexRender(
                      header.column.columnDef.header,
                      header.getContext()
                    )}
              </Table.Th>
            ))}
          </Table.Tr>
        ))}
      </Table.Thead>
      <Table.Tbody>
        {table.getRowModel().rows.map((row) => (
          <Table.Tr key={row.id}>
            {row.getVisibleCells().map((cell) => (
              <Table.Td key={cell.id}>
                {flexRender(cell.column.columnDef.cell, cell.getContext())}
              </Table.Td>
            ))}
          </Table.Tr>
        ))}
      </Table.Tbody>
      <Table.Tfoot>
        {table.getFooterGroups().map((footerGroup) => (
          <Table.Tr key={footerGroup.id}>
            {footerGroup.headers.map((header) => (
              <Table.Th key={header.id}>
                {header.isPlaceholder
                  ? null
                  : flexRender(
                      header.column.columnDef.footer,
                      header.getContext()
                    )}
              </Table.Th>
            ))}
          </Table.Tr>
        ))}
      </Table.Tfoot>
    </Table>
  );
});
export const StakeholderTable = observer(() => {
  const { stakeholders } = useStore();
  const data = stakeholders;
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });
  return (
    <Table>
      <Table.Thead>
        {table.getHeaderGroups().map((headerGroup) => (
          <Table.Tr key={headerGroup.id}>
            {headerGroup.headers.map((header) => (
              <Table.Th key={header.id}>
                {header.isPlaceholder
                  ? null
                  : flexRender(
                      header.column.columnDef.header,
                      header.getContext()
                    )}
              </Table.Th>
            ))}
          </Table.Tr>
        ))}
      </Table.Thead>
      <Table.Tbody>
        {table.getRowModel().rows.map((row) => (
          <Table.Tr key={row.id}>
            {row.getVisibleCells().map((cell) => (
              <Table.Td key={cell.id}>
                {flexRender(cell.column.columnDef.cell, cell.getContext())}
              </Table.Td>
            ))}
          </Table.Tr>
        ))}
      </Table.Tbody>
      <Table.Tfoot>
        {table.getFooterGroups().map((footerGroup) => (
          <Table.Tr key={footerGroup.id}>
            {footerGroup.headers.map((header) => (
              <Table.Th key={header.id}>
                {header.isPlaceholder
                  ? null
                  : flexRender(
                      header.column.columnDef.footer,
                      header.getContext()
                    )}
              </Table.Th>
            ))}
          </Table.Tr>
        ))}
      </Table.Tfoot>
    </Table>
  );
});
wise-white
wise-white•2y ago
Data and Columns need a stable reference. I thought Mobx would provide that, but I guess it works differently?
vicious-gold
vicious-goldOP•2y ago
Yeah, thought so too. I put data in useState and change it with useEffect and everything seems to work properly. Not sure if I'll run into problems later.

Did you find this page helpful?