Material-table: The table is fully rerendered on parent state update since 1.53.0

[sebastiendan]

Describe the bug
I updated to 1.53.0 and noticed the table was fully rerendered when the parent component state was updated. This was a big deal in my situation: I have an EventSource that receives data pushed by the server and renders new data in new rows. Because of this new behaviour each data push (followed by a state update in the parent) led the table to get back to init configuration (first page, default page size, etc.).

Is this somehow the intended behaviour?

To Reproduce
Steps to reproduce the behavior:

1. Have a paginated table with multiple pages of rows
2. Update the parent state with new values (e. g. update a boolean to its opposite value on an interval)
3. Change page or page size
4. See the table getting back to its init configuration on rerender

Expected behavior
Before 1.53.0, you can navigate through the pages and see new rows appear. You can also change any table UI setting without loosing it,

Desktop (please complete the following information):

• OS: Windows
• Browser: Chrome
• Version: 78.0.3904.70 (Official Build) (64-bit)

[TJHdev]

I'm having the same issue. New array passed into data is reseting pagination and the search field.

[nelstrom]

We're having this issue too. As a temporary fix, downgrading to version 1.52.0 solved the problem for us.

I'm looking at the release notes for v1.53.0 trying to figure out which change introduced this behaviour. Here's the compare view for v1.52.0...v1.53.0

[nelstrom]

I've found what might be a possible cause.

In src/material-table.js, the setDataManagerFields() function now includes this line:

this.dataManager.changeSearchText(props.options.searchText);

In src/utils/data-manager.js, the changeSearchText() function looks like this:

  changeSearchText(searchText) {
    this.searchText = searchText;
    this.searched = false;
    this.currentPage = 0;
  }

I haven't had a chance to dig deep into this and figure out how often the changeSearchText() function is being called, but I thought the fact that it's setting this.currentPage = 0 might be a possible cause for this issue.

[re-anderson]

@nelstrom I came to the same conclusion. However, I hadn't dug deep enough to see that paging was being reset as well. My (probably duplicate) issue is #1272

[jlucier]

I'm now observing better behavior here, things like search text and current page are preserved on re-render, but the chosen "pageSize" and an columns selected/deselected using "columnsButton" are reset to the initial state.

I'm on 1.54.1.

[AndyWorral]

I'm having a similar issue. I have a material-table with grouping turned on inside a tabbed UI via material-ui/Tabs, if I change tabs and come back the table has lost grouping state. Even if I modify my TabPanel control to not actually hide I still get the re-render and loss of state when selecting tab controls.

function TabPanel(props: TabPanelProps) {
    const { children, value, index, ...other } = props;
    return (
        <Typography
            component="div"
            role="tabpanel"
            // hidden={value !== index}  <--- DISABLE HIDING
            id={`nav-tabpanel-${index}`}
            aria-labelledby={`nav-tab-${index}`}
            {...other}>
            <Box p={3}>{children}</Box>
        </Typography>
    );
}

Search and Sort will maintain themselves. However anything changed via Draggable or Grouping (drag and drop) will revert on parent element change.

[zxqj]

@AndyWorral Making the columns array passed to material-table part of the parent component's state appears to fix the issue you're having with maintaining grouping state, which will work if you're not doing any dynamic modification of said columns array.

[omridevk]

having the same issue, keep pushing new data to the table and all selection and state is lost in each update.
isn't there like a key property that we can use?

[Abekonge]

I'm having the same issue and now looking into this.

Getting the demo app in the repo up and running (after some minor issues), I could not reproduce this problem.

The demo app was a class component, so I formed the hypothesis, that it had something to do how functional components or hooks caused rerenders.

So I tested this hypothesis, and lo and behold: When changing a useState hook in a parent component containing a material-table, the filtering, and selection is reset.

So any ideas why this is happening?

[Abekonge]

@Abekonge
Found a way:
you can pass to useTable the following:

useTable({getRowId: React.useCallback(row => {use row key that is persistent}, []})

that solved the issue for me, now every row/cell had a prefix with my special key in it so as long as my rows themselves kept the same key, the state would not updated if the key hasn't changed.
Hope that helps.

Thanks for looking!

But I'm confused - in your code you are using react-table which is a completely different table-library. Or am I misunderstanding something here?

[omridevk]

baaah sorry man, I had this issue with Material UI, so instead I have moved to using react-table with Material UI Table as the UI layer.
Sorry for misleading, I was sure this thread was in react-table repository.
My bad, sorry for the confusion.
But if you want, you can use https://www.npmjs.com/package/react-table
with Material UI pretty straight forward
React-table has soo many useful features built in, and as it just provides functionality via Hooks, you can use Material UI table to render the UI, but use the selection, pagination, and other table logic is being handled by React table library.

[omridevk]

Could be an overkill for your project, but I found that react-table with Material UI table works really really well.

[Abekonge]

I'm having the same issue and now looking into this.

Getting the demo app in the repo up and running (after some minor issues), I could not reproduce this problem.

The demo app was a class component, so I formed the hypothesis, that it had something to do how functional components or hooks caused rerenders.

So I tested this hypothesis, and lo and behold: When changing a useState hook in a parent component containing a material-table, the filtering, and selection is reset.

So any ideas why this is happening?

Ok I was wrong. It was nothing to do with class vs functional component.

But similar to zxqj 's answer above. If you lift the data state up to the parent, the selection state does not get reset by changing parent state.

Filtering state on the other hand is still reset. I'm looking into this now:

(update)
Filtering state can be kept by lifting the columns content up into the parent state, similar to what zxqj's asserted for grouping state.

so

WORKAROUNDS:

Problem: Selection gets reset when changing parent state
Solution:

• Lift the contents of the data prop into parent state, to preserve selection state in material table.

Problem: Filter-settings and grouping (and possible other things) gets reset when changing parent state
Solution:

• Lift the contents of the columns prop into parent state, to preserve filter-settings and grouping

[Abekonge]

Could be an overkill for your project, but I found that react-table with Material UI table works really really well.

I've changed to react-table after looking into it, because of your comment. And I love it! So comments in the wrong place can be helpful too! ;-)

[baloian]

I am having the same issue with 1.65.0 version. Anyone knows if there is a temporary solution until this is resolved?

[s-kris]

I'm using setState in onSelectionChange

onSelectionChange={(rows) => {
                    setState({ ...state, selectedTitles: rows });
                 }}

@nelstrom I downgraded to 1.52.0 but the problem isn't solved.

@Abekonge I lifted the columns prop data into parent state (not a state variable actually), it's solved.

Thank you guys!

[geissmannsbin]

I'm having the same issue and now looking into this.
Getting the demo app in the repo up and running (after some minor issues), I could not reproduce this problem.
The demo app was a class component, so I formed the hypothesis, that it had something to do how functional components or hooks caused rerenders.
So I tested this hypothesis, and lo and behold: When changing a useState hook in a parent component containing a material-table, the filtering, and selection is reset.
So any ideas why this is happening?

Ok I was wrong. It was nothing to do with class vs functional component.

But similar to zxqj 's answer above. If you lift the data state up to the parent, the selection state does not get reset by changing parent state.

Filtering state on the other hand is still reset. I'm looking into this now:

(update)
Filtering state can be kept by lifting the columns content up into the parent state, similar to what zxqj's asserted for grouping state.

so

WORKAROUNDS:

Problem: Selection gets reset when changing parent state
Solution:

• Lift the contents of the data prop into parent state, to preserve selection state in material table.

Problem: Filter-settings and grouping (and possible other things) gets reset when changing parent state
Solution:

• Lift the contents of the columns prop into parent state, to preserve filter-settings and grouping

can someone give a small example on how one would go about liftig the the contents of the data prop into the parent state? I am fairly new to react and I would love to see how that works =)

[s-kris]

I'm having the same issue and now looking into this.
Getting the demo app in the repo up and running (after some minor issues), I could not reproduce this problem.
The demo app was a class component, so I formed the hypothesis, that it had something to do how functional components or hooks caused rerenders.
So I tested this hypothesis, and lo and behold: When changing a useState hook in a parent component containing a material-table, the filtering, and selection is reset.
So any ideas why this is happening?

Ok I was wrong. It was nothing to do with class vs functional component.
But similar to zxqj 's answer above. If you lift the data state up to the parent, the selection state does not get reset by changing parent state.
Filtering state on the other hand is still reset. I'm looking into this now:
(update)
Filtering state can be kept by lifting the columns content up into the parent state, similar to what zxqj's asserted for grouping state.
so

WORKAROUNDS:

Problem: Selection gets reset when changing parent state
Solution:

• Lift the contents of the data prop into parent state, to preserve selection state in material table.

Problem: Filter-settings and grouping (and possible other things) gets reset when changing parent state
Solution:

• Lift the contents of the columns prop into parent state, to preserve filter-settings and grouping

can someone give a small example on how one would go about liftig the the contents of the data prop into the parent state? I am fairly new to react and I would love to see how that works =)

Here, I simplified the code for readability

function CustomTable(props) {
  const { data, loading } = fetchInitialData();
  const tableData = data ?.tableData || []; // we need to do this because columns are generated dynamically

  if (loading) {
    return (
      <Card>
        <Skeleton count={20} />
      </Card>
    );
  }

  return (
        <MaterialTable
          {...props}
          data={(query) =>
            new Promise((resolve, reject) => {
              const remoteDataObject = fetchRemoteData(someParams);
              resolve(remoteDataObject);
            })
          }
          columns={props.columns || generateColumns(tableData[0] || [])}
        />
  );
}

export default CustomTable;