[data grid] re-rendering / resetting filter on state change about mui-x

[KenanYusuf]

Hi @rahulchougule

The issue you are seeing is caused by defining the styled versions of the components within the body of your App component. As a rule, you should never define components inside of another component.

const Component1 = () => {
  // ❌ new component is created on every rerender
  const Component2 = () => <div>Component 2</div>;
  
  return <Component2 />
}

// ✅ the component is defined once
const Component2 = () => <div>Component 2</div>;

const Component1 = () => {  
  return <Component2 />
}

See the updated example where I have moved the StyledDataGrid outside of the App component: https://codesandbox.io/p/sandbox/13636-re-rendering-resetting-filter-on-state-change-jp7gxs?file=%2Fsrc%2FApp.js%3A136%2C34

[michelengelen]

To help us diagnose the issue efficiently, could you provide a stripped-down reproduction test case using the latest version? A live example would be fantastic! ✨

For your convenience, our documentation offers templates and guides on creating targeted examples: Support - Bug reproduction

Just a friendly reminder: clean, functional code with minimal dependencies is most helpful. Complex code can make it tougher to pinpoint the exact issue. Sometimes, simply going through the process of creating a minimal reproduction can even clarify the problem itself!

Thanks for your understanding! 🙇🏼

[rahulchougule]

I tried to reproduce this issue on code sandbox please check here. issue

It is due to the StyledDataGrid. If you use DataGrid instead of StyledDataGrid it will work.

[segullshairbutt]

I was also facing the same problem when I updated to version 7. I use server-side pagination, and when a page is changed I update the data based on that page change. the onPaginationModelChange callback is triggered again with the initial page.

But I found that I wasn't memoizing the rowCount when new data was loaded as recommended by MUI at: https://mui.com/x/react-data-grid/pagination/#server-side-pagination, I changed it accordingly and everything has started working so far.

@rahulchougule I am not able to access your sandbox at the link you provided: https://codesandbox.io/s/sharp-alex-vn2srr

[rahulchougule]

@segullshairbutt you can try now

[segullshairbutt]

@segullshairbutt you can try now

Still not accessible publicly

[KenanYusuf]

@segullshairbutt you can try now

There is a typo in this link, it should be https://codesandbox.io/p/sandbox/sharp-alex-vn2srr

I have updated the issue description with a link to this.

[rahulchougule]

@KenanYusuf Got your point. Thank you for your updates.

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@rahulchougule: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.