I have basic react example for learning and I use material-table in one of my components. Each time I change the page and re-open it (unmount and mount component), my component which contains material-table load more slowly. I share my code below.
import MaterialTable from 'material-table';
const columns = [
{ title: 'Id', field: 'id', hidden: true },
{ title: 'Username', field: 'username' },
{ title: 'Name', field: 'name' },
{ title: 'Phone', field: 'phone'}
];
const tableData = [
{
id: 1,
username: "User-1",
name: "name-1",
phone: "555 444 33 22"
},
{
id: 2,
username: "User-2",
name: "name-2",
phone: "111 222 33 44"
},
{
id: 3,
username: "User-3",
name: "name-3",
phone: "999 999 99 99"
}
];
const MTable = () => {
return (
<MaterialTable
title="Basic Search Preview"
columns={columns}
data={tableData}
options={{search: true }}
/>
)
}
export default MTable
After long search I did not find any solution, and after long try I just change the place of columns definition like below.
const MTable = () => {
const columns = [
{ title: 'Id', field: 'id', hidden: true },
{ title: 'Username', field: 'username' },
{ title: 'Name', field: 'name' },
{ title: 'Phone', field: 'phone'}
];
return (
<MaterialTable
title="Basic Search Preview"
columns={columns}
data={tableData}
options={{search: true }}
/>
)
}
This change solve my problem but I really want to learn why this happened. When I made the column definition outside of the method why memory leak and render slowed each page change. At the same time, when I moved into method what changed?
{ !show ? null : <MTable /> }it took approx. 50, 70, 130, 870, 8020 milliseconds to build the MaterialTable. – Telegraphic