New Jan 19, 2026

How to update column without updating whole table [closed]

Libraries, Frameworks, etc. All from Newest questions tagged reactjs - Stack Overflow View How to update column without updating whole table [closed] on stackoverflow.com

Steps to reproduce

Steps:

  1. Open this link to live example: site (the source: codesanbox)
  2. Inspect using React Developer Tools
  3. Open Profiler and turn on Highlight updates when components render
  4. Watch the results

Based on my results (if I understand them correctly) the most optimized version to updating the values in one column is upateColumns

Results of testing different methods to update column

Is there any way to update column and rerender only cells of this column?

Current behavior

Whole table rerenders including each row and each cell when values of 1 column are updated

Expected behavior

Only cells of updated column should rerender when values of 1 column are updated

Context

I'm working on a project where we have a big table and the one column should be updated very frequently (5-6 times in a second)

Here is the working minimum code:

<!-- Fonts to support Material Design -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" />

<!-- Icons to support Material Design -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<script type="importmap">
{
"imports": {
"react": "https://esm.sh/react@latest",
"react-dom": "https://esm.sh/react-dom@latest",
"react-dom/client": "https://esm.sh/react-dom@latest/client",
"react/jsx-runtime": "https://esm.sh/react@latest/jsx-runtime",
"@mui/material": "https://esm.sh/@mui/material@latest",
"@mui/x-data-grid-premium": "https://esm.sh/@mui/x-data-grid-premium@latest?bundle",
"@faker-js/faker": "https://esm.sh/@faker-js/faker@latest"
}
}
</script>


<div id="root"></div>


<!-- Babel -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>


<script type="text/babel" data-type="module">
import React, { StrictMode, useState, useEffect } from "react";
import { createRoot } from "react-dom/client";
import { Box } from "@mui/material";
import { DataGridPremium, useGridApiRef } from "@mui/x-data-grid-premium";
import { faker } from "@faker-js/faker";


const DataGrid = (props) => {
return (
<DataGridPremium
pagination={false}
rowSelection={false}
hideFooter={true}
disableVirtualization={false}
disableColumnMenu={true}
disableColumnSelector={true}
disableColumnSorting={true}
{...props}
/>
);
};


const rows = Array.from({ length: 3 }, () => ({
id: faker.string.nanoid(),
name: faker.person.firstName(),
surname: faker.person.lastName(),
balance: 0,
}));


const useInterval = (cb) =>
useEffect(() => {
const timer = setInterval(cb, 200);


return () => {
clearInterval(timer);
};
}, []);


const UpdateState = ({ rows, columns }) => {
const [refinedRows, setRefinedRows] = useState(rows);


useInterval(() => {
setRefinedRows((prevRows) =>
prevRows.map((prevRow) => ({
...prevRow,
balance: Math.ceil(Math.random() * 10),
}))
);
});


return (
<div>
<p>Update using state</p>
<DataGrid rows={refinedRows} columns={columns} />
</div>
);
};


export const UpdateRows = ({ rows, columns }) => {
const apiRef = useGridApiRef();


useInterval(() => {
if (!apiRef.current) return;


const rows = apiRef.current.getAllRowIds();


apiRef.current.updateRows(
rows.map((id) => ({
id,
balance: Math.ceil(Math.random() * 10),
}))
);
});


return (
<div>
<p>Update using updateRows</p>
<DataGrid apiRef={apiRef} rows={rows} columns={columns} />
</div>
);
};


export const UpdateColumns = ({ rows, columns }) => {
const apiRef = useGridApiRef();


useInterval(() => {
if (!apiRef.current) return;


const balanceColumn = apiRef.current
.getAllColumns()
.find((column) => column.field === "balance");


balanceColumn.valueGetter = () => Math.ceil(Math.random() * 10);


apiRef.current.updateColumns([balanceColumn]);
});


return (
<div>
<p>Update using updateColumns</p>
<DataGrid apiRef={apiRef} rows={rows} columns={columns} />
</div>
);
};


const columns = [
{
field: "name",
headerName: "Name",
flex: 1,
},
{
field: "surname",
headerName: "Surname",
flex: 1,
},
{
field: "balance",
headerName: "Balance",
flex: 1,
},
];


const App = () => {
return (
<Box sx={{ display: "flex", flexDirection: "column", gap: 4, mt: 4 }}>
<UpdateState rows={rows} columns={columns} />
<UpdateRows rows={rows} columns={columns} />
<UpdateColumns rows={rows} columns={columns} />
</Box>
);
};


createRoot(document.querySelector("#root")).render(
<StrictMode>
<App />
</StrictMode>
);
</script>

Corresponding issue on the GitHub: https://github.com/mui/mui-x/issues/20936

Scroll to top