Memoize Components Guide
As of version 1.1, Material React Table has introduced a new memoMode
prop that will allow you to either memoize table cells, table rows, or the entire table body in order to improve render performance on large tables.
However, memoizing these components will BREAK some features!
DON'T MEMOIZE COMPONENTS UNLESS YOU KNOW WHAT YOU'RE DOING AND UNDERSTAND WHICH FEATURES WILL BREAK.
Memoizing Table Cells
Memoizing table cells can make a small, but positive impact on render performance, and it is only incompatible with a few of the dynamic features of Material React Table.
Cell Memoization Breaks the Following Features:
density toggle, column resizing
The reason these features are incompatible with cell memoization is because these features depend on table cells being re-rendered.
Features That Should Still Work with Cell Memoization:
column hiding, column reordering, column pinning, editing, filtering, pagination, searching, sorting, row expanding, row selection, row virtualization,
<MaterialReactTablecolumns={columns}data={data}enableDensityToggle={false} //density does not work with memoized cellsmemoMode="cells" // memoize table cells to improve render performance, but break some features/>
Actions | First Name | Last Name | Address | City | State | ||
---|---|---|---|---|---|---|---|
Alberta | Kautzer | 82321 Reichert Bridge | Armandoland | Mississippi | |||
Imelda | Harber | 866 Kuvalis Groves | North Kieran | Iowa | |||
Leonie | Hickle | 6094 Hudson Park | Mandytown | Oregon | |||
Cristal | Carroll | 41222 Webster Oval | South Blaze | New Mexico | |||
Golda | Brakus | 13718 Blick Port | Fort Tressachester | New Mexico | |||
Jackeline | Little | 130 Kuhlman Creek | Gordonworth | Ohio | |||
Karson | Flatley | 9494 McCullough Stravenue | Pricemouth | Delaware | |||
Jonathan | Bednar | 79954 Klein Loaf | Abdielville | Indiana | |||
Rocky | Funk | 602 Josianne Ramp | Fort Pearlworth | Mississippi | |||
Anthony | Stokes | 71571 Santa Mission | Beaumont | Alaska | |||
Brenden | Gislason | 1291 Lyla Gateway | Lacey | North Carolina | |||
Webster | Ankunding | 229 Yasmin Passage | Doylefurt | Arizona | |||
Marley | Towne | 5895 Bartoletti Falls | Kendale Lakes | Indiana | |||
Alexandrine | Hintz | 89462 Halvorson Junction | Jerrodview | Missouri | |||
Xavier | Lowe | 829 Rodriguez Mall | Grantberg | Texas | |||
Camden | Kemmer | 3110 Andreane Villages | Corpus Christi | Nebraska | |||
Ashtyn | Hermiston | 6087 Howell Ports | Castro Valley | Tennessee | |||
Kaylee | Baumbach | 9576 Kristina Stravenue | South Beverly | Colorado | |||
Eugene | VonRueden | 43151 Rogelio Alley | Balistrerifurt | Tennessee | |||
Robin | McDermott | 5032 Batz Valleys | Shaynabury | Montana | |||
1import React, { FC, useMemo } from 'react';2import MaterialReactTable, { MRT_ColumnDef } from 'material-react-table';3import { Typography } from '@mui/material';4import { data, Person } from './makeData';56export const Example: FC = () => {7 const columns = useMemo<MRT_ColumnDef<Person>[]>(8 //column definitions...33 );3435 return (36 <MaterialReactTable37 columns={columns}38 data={data}39 //just for demo purposes40 defaultColumn={{41 Cell: ({ cell }) => {42 //see how often cells are re-rendered43 console.info('render cell', cell.id);44 return <>{cell.getValue()}</>;45 },46 }}47 editingMode="row"48 enableColumnOrdering49 enableDensityToggle={false} //density toggle is not compatible with memoization50 enableEditing51 enablePinning52 enableRowSelection53 enableStickyHeader54 initialState={{ pagination: { pageSize: 20, pageIndex: 0 } }}55 memoMode="cells"56 muiTableContainerProps={{ sx: { maxHeight: '500px' } }}57 renderDetailPanel={({ row }) => <div>{row.original.firstName}</div>}58 renderTopToolbarCustomActions={() => (59 <Typography component="span" variant="h4">60 Memoized Cells61 </Typography>62 )}63 />64 );65};6667export default Example;68
Memoizing Table Rows
Memoizing entire table rows can make an even more positive impact on render performance, but it is incompatible with a lot of the dynamic features of Material React Table.
Row Memoization Breaks the Following Features:
density toggle, column hiding, column resizing, column reordering, column pinning, row expanding, row selection
The reason these features are incompatible with row memoization is because they require the entire row or cells to be re-rendered in order to update the UI.
Features That Should Still Work with Row Memoization:
filtering, pagination, searching, sorting, row virtualization,
<MaterialReactTablecolumns={columns}data={data}enableDensityToggle={false} //density does not work with memoized rowsenableHiding={false} //column hiding does not work with memoized rowsmemoMode="rows" // memoize table rows to improve render performance, but break a lot of features/>
First Name | Last Name | Address | City | State |
---|---|---|---|---|
Kyleigh | Padberg | 57128 Layla Canyon | Sedrickfurt | Alabama |
Madelynn | Conroy | 006 Edna Well | Oak Lawn | Utah |
Lisette | King | 37090 Jordon Light | Fort Natalie | Oregon |
Emmet | Medhurst | 27667 Tillman Drive | Pittsburg | Vermont |
Melissa | Stark | 70121 Gleichner Expressway | East Cary | Florida |
Thaddeus | Davis | 250 Maybell Springs | East Norvalmouth | Missouri |
Nettie | Flatley | 96048 Abernathy Way | South Jackie | Maine |
Narciso | Veum | 164 Prosacco Estate | Lake Linwoodstead | Florida |
Giovani | Wolff | 66888 Cullen Center | New Nicolashaven | Rhode Island |
Jalen | Cormier | 50679 Darby Drive | Jamaalburgh | Texas |
Jasmin | Gibson | 72724 Crist Groves | West Harley | Illinois |
Mohammad | Hamill | 443 Wilhelm Plaza | Terre Haute | New Mexico |
Milo | Dicki | 778 Wilfred Meadow | Krisland | Arkansas |
Erich | Lynch | 60472 Price Parks | Lake Mavis | Illinois |
Deontae | Boyle | 4573 Zboncak Underpass | Dandrefort | Michigan |
Antwon | Turcotte | 80006 Luettgen Well | New Lucienneshire | West Virginia |
Marcella | Hermann | 0339 Kunde Junctions | Tallahassee | Alaska |
Maud | Abernathy | 3590 Shayna Path | North Afton | South Carolina |
Asa | Crist | 675 Tamara Corner | North Melody | New Mexico |
Anita | Wiza | 47680 Rhianna Roads | Welchhaven | Ohio |
1import React, { FC, useMemo } from 'react';2import MaterialReactTable, { MRT_ColumnDef } from 'material-react-table';3import { Typography } from '@mui/material';4import { data, Person } from './makeData';56export const Example: FC = () => {7 const columns = useMemo<MRT_ColumnDef<Person>[]>(8 //column definitions...33 );3435 return (36 <MaterialReactTable37 columns={columns}38 data={data}39 //just for demo purposes40 defaultColumn={{41 Cell: ({ cell }) => {42 //see how often cells are re-rendered43 console.info('render cell', cell.id);44 return <>{cell.getValue()}</>;45 },46 }}47 enableDensityToggle={false} //density toggle is not compatible with memoization48 enableHiding={false}49 enableStickyHeader50 initialState={{ pagination: { pageSize: 20, pageIndex: 0 } }}51 memoMode="rows"52 muiTableContainerProps={{ sx: { maxHeight: '500px' } }}53 renderTopToolbarCustomActions={() => (54 <Typography component="span" variant="h4">55 Memoized Rows56 </Typography>57 )}58 />59 );60};6162export default Example;63
Memoizing Table Body
If your table never needs to re-render and you don't use any of the dynamic features of Material React Table, you can memoize the entire table body to massively improve render performance.
Table Body Memoization Breaks the Following Features:
density toggle, column hiding, column resizing, column reordering, column pinning, row expanding, row selection, filtering (internal client-side), pagination (internal client-side), searching (internal client-side), sorting (internal client-side), row virtualization
None of these features will work with table body memoization because the entire table body is memoized. The table is essentially "frozen" at the first render.
Features That Should Still Work with Table Body Memoization:
manual server side sorting, pagination, filtering
<MaterialReactTablecolumns={columns}data={data}enableColumnActions={false} //no need for column actions if none of them are enabledenableColumnFilters={false} //filtering does not work with memoized table bodyenableDensityToggle={false} //density does not work with memoized table bodyenableGlobalFilter={false} //searching does not work with memoized table bodyenableHiding={false} //column hiding does not work with memoized table bodyenablePagination={false} //pagination does not work with memoized table bodyenableSorting={false} //sorting does not work with memoized table bodymemoMode="table-body" // memoize table body to improve render performance, but break all features/>
First Name | Last Name | Address | City | State |
---|---|---|---|---|
Erna | Haag | 8371 Legros Mountain | Leonport | Wyoming |
Judy | Koepp | 88662 Nelda Coves | Farmington Hills | Alaska |
Carmine | Adams | 543 Herzog Mount | East Eleanoraview | Texas |
Neoma | Hettinger | 570 Mason Course | Jeniferhaven | New Jersey |
Hulda | Hauck | 859 Kilback Ridges | Azusa | Georgia |
Gregory | Bayer | 900 Emely Shores | Minnetonka | Missouri |
Edgardo | Klocko | 64056 Malachi Station | Kautzerville | New Hampshire |
Francesca | O'Hara | 84041 Kaleb Club | Lake Alize | Massachusetts |
Jedediah | McGlynn | 64073 Lynch Burg | South Titus | Texas |
Arianna | West | 9007 Gottlieb Cliffs | Rockwall | Illinois |
Lizzie | Grant | 359 Kristy Square | North Conradfort | Kentucky |
Hobart | Harris | 696 Grant Lock | Anahiberg | Arizona |
Bailey | Kessler | 31389 Gerhard Meadow | Birmingham | New Hampshire |
Meda | Denesik | 2454 Shana Plains | Bradtkeland | Illinois |
Cruz | Purdy | 761 Boyer Vista | Bolingbrook | Arizona |
Abdul | Leuschke | 7263 Maynard Greens | Port Jazmyne | Maine |
Alia | Yost | 40402 Fahey Neck | Lehnerstad | Louisiana |
Maribel | Johns | 093 Alvis Lights | Port Leathabury | Pennsylvania |
Bertrand | Pagac | 660 Smith Canyon | West Craig | Florida |
Bennie | Lueilwitz | 04589 Simonis Circle | Kozeycester | Tennessee |
Adelle | Wiza | 90890 Chelsie Manors | Kuhlmanville | Oklahoma |
Rosendo | Skiles | 293 Barry Rest | Guiseppeboro | Maine |
Anahi | Howell | 844 Marilyne Road | Kipport | Arkansas |
Wilbert | Cummings | 5031 Chandler Center | West Florence | Connecticut |
Daphne | Reichert | 0415 Ratke Junction | Troy | Oklahoma |
Vladimir | Lesch | 73073 Elinor Ville | West Hope | Michigan |
Jayde | Shields | 4424 Zane Glens | Auerside | Florida |
Jennie | Reichert | 007 Zboncak Light | Alyciahaven | Delaware |
Leilani | Rohan | 16737 Elta Roads | Osinskichester | Alabama |
Emery | Schultz | 40078 Lolita Oval | Wauwatosa | Oregon |
Aisha | Bosco | 466 Crist Coves | North Henriette | Connecticut |
Zita | Mraz | 788 Malinda Plaza | East Jayda | Wisconsin |
Kelvin | Will | 07225 Kub Rue | Vacaville | Wyoming |
Salma | Howe | 724 Marvin Lakes | West Alanaview | Indiana |
May | Braun | 1700 Gerlach Route | Fort Carson | Alabama |
Helena | Senger | 05454 Mills View | Fort Kiarramouth | Texas |
Sallie | Wintheiser | 645 O'Conner Place | Kihnland | Wyoming |
Sydni | McGlynn | 124 Brock Branch | Fort Jerel | Maryland |
Gennaro | Carroll | 58234 Runolfsson Mountain | Nikolascester | Maine |
Sidney | Kuvalis | 186 Donavon Corners | West Marcellusfort | Texas |
Ted | O'Hara | 47585 Halie Harbors | Lake Kyle | Michigan |
Jeffrey | Wiegand | 77672 Kilback Curve | West Jazminboro | Utah |
Geo | Marks | 122 Misty Trace | Louveniastead | Michigan |
Jayde | Crooks | 019 Garnet Passage | Croninfield | Delaware |
Zula | Kuphal | 865 Dach Stravenue | Framingham | North Carolina |
Katarina | Luettgen | 69556 Jayden Springs | Freemanchester | New Mexico |
Jabari | Barrows | 988 Halvorson Hills | West Alessandraport | New Jersey |
Aurelie | Kohler | 0568 Shields Manors | Lakewood | Maryland |
Nelle | Sauer | 21492 Huels Walk | Citrus Heights | North Carolina |
Nat | Konopelski | 50202 Jovan Underpass | Cornellside | Vermont |
Jada | Graham | 561 Samson Vista | Port Toneyview | Louisiana |
Laurianne | Sawayn | 247 Tremblay Rapid | Vanceville | Idaho |
Shemar | Kirlin | 7049 Skiles Field | North Dudley | Alaska |
Edna | Brakus | 899 Edd Crossing | New Jadyn | Texas |
Lilly | Yost | 085 Milton Vista | Lindaton | Louisiana |
Clemmie | Haley | 1242 Chesley Greens | Smyrna | Hawaii |
Robb | Bernhard | 717 Enrique Village | Giovannimouth | Idaho |
Adrain | Will | 711 Alycia Corner | East Myra | South Dakota |
Madelynn | Volkman | 20823 Marcos Mountain | Runolfsdottircester | Wisconsin |
Winifred | Champlin | 172 Daisy Mill | North Patsyhaven | Montana |
Coy | Schowalter | 890 Alverta Plaza | Hadleyfort | Wisconsin |
Maryse | Beer | 4664 Stefan Circles | Lake Issac | New Hampshire |
Norene | Jacobi | 52793 Hegmann Isle | Erie | Alaska |
Johnathon | Barton | 253 Cayla Dale | Blandaside | Florida |
Ramiro | Lang | 099 Garth Station | Springfield | Kansas |
Kristoffer | Grady | 0916 MacGyver Gateway | East Lou | Arkansas |
Jaunita | Hills | 4887 Phyllis Neck | South Isaiahmouth | Ohio |
Nikolas | Schowalter | 285 Stanton Lock | North Jonathon | Georgia |
Ansley | Wolff | 505 Jerde Mountains | South Brandi | Pennsylvania |
Maud | Hegmann | 09899 Mohr Shores | Erinfort | Alaska |
Shea | Kohler | 2215 Angela Valley | Cletatown | Kentucky |
Fernando | Shields | 25912 Jaren Neck | Cheyenne | Mississippi |
Kira | Wilkinson | 33035 Otilia Mission | Lake Kareem | Kentucky |
Wilford | Monahan | 27850 Chloe Lane | Nyafort | North Dakota |
Jackeline | Schamberger | 925 Anjali Row | Kiehnmouth | Kentucky |
Gerson | Wyman | 51420 Jakubowski Island | Shanyboro | Washington |
Ken | Medhurst | 55814 Volkman Ways | New Marleyside | Alabama |
Edgardo | Davis | 4098 Boehm Mountain | Lake Adityaburgh | Alaska |
Concepcion | Haag | 5306 Ludie Port | Lake Delaneyton | New Mexico |
Nikita | Adams | 071 Nick Roads | Port Jada | Michigan |
Norberto | Green | 578 Noel Falls | Gutkowskiburgh | North Carolina |
Matilde | Kerluke | 3555 Nolan Common | Lake Elaina | Montana |
Verda | Bartoletti | 14524 Hand Springs | Domenicshire | Alabama |
Adelia | Emmerich | 6461 Ellsworth Junctions | East Bridgette | Massachusetts |
Roma | Ankunding | 038 Rutherford Bypass | Creminland | Hawaii |
Benton | Will | 027 Lakin Union | Port Melany | Nebraska |
Jayson | Rosenbaum | 696 Abshire Orchard | Palm Beach Gardens | Mississippi |
Abbey | Hoeger | 308 Hirthe Bypass | Lakeland | Massachusetts |
Stan | DuBuque | 54220 Howe Trail | New Virgil | New Hampshire |
Thelma | Marvin | 8316 Anissa Skyway | Bellevue | Texas |
Adela | Mosciski | 7175 Scarlett Inlet | Malloryfurt | Wyoming |
Narciso | Hessel | 2582 Telly Spurs | Dublin | Georgia |
Jazlyn | Anderson | 7113 Kelley Wall | East Vito | Georgia |
Etha | Hudson | 305 Kiera Common | East Miracle | Michigan |
Monique | Kuhic | 65159 Wava Lodge | Oklahoma City | Montana |
Cielo | Mills | 07954 West Road | Sunrise Manor | Wyoming |
Llewellyn | Frami | 90812 Gorczany Junction | Mitchellville | Missouri |
Cierra | King | 0797 Reinger Fort | Conncester | Massachusetts |
Francesco | Schuppe | 5247 Lockman Dale | Lake Jacintocester | Ohio |
Valentina | Stoltenberg | 3049 Oberbrunner Isle | Osinskifield | Montana |
Carmel | Dooley | 6079 Madisyn Crest | Riverton | Nebraska |
Bettye | Little | 14055 Bette Views | New Olen | Arizona |
Kim | Johnston | 9157 Gleason Islands | North Taniafield | Maine |
Rebekah | Hackett | 20891 Darrion Curve | Ryleyhaven | Arizona |
Guy | Brown | 4856 Rohan Ford | Fayborough | Florida |
Gus | Wehner | 533 Hayes Forge | Rancho Palos Verdes | Oregon |
Howell | Hudson | 6079 Treva Falls | Lake David | Vermont |
Keshawn | Grimes | 0865 Krystina Light | Amosfurt | Louisiana |
Lauretta | Bartoletti | 48011 Howe Shore | Lake Khalid | Alaska |
Gaetano | Klein | 8433 Wilkinson Forks | Schaefermouth | Massachusetts |
Jarred | Wyman | 7308 O'Reilly Squares | Fort Albachester | New Hampshire |
Kaitlyn | Cassin | 252 Parisian Locks | North Augustusville | Virginia |
Cydney | Gleichner | 072 Gretchen Walks | Yoshikoshire | Maryland |
Daphne | Koelpin | 21942 Agustina Forge | Lake Darrick | Vermont |
Jordane | Brekke | 1187 Ervin Dam | Ullrichberg | Hawaii |
Samantha | Feest | 0407 Jaunita Ranch | Greeley | Utah |
Austin | Spencer | 4251 Maureen Plain | Aufderharbury | North Carolina |
Thora | Ankunding | 1197 Huel Cliffs | Shoreline | Maryland |
Rudy | Mertz | 9903 Randall Mission | Melyssaborough | Maryland |
Ebony | Keebler | 37823 Larkin Way | Deefurt | Michigan |
Muriel | Ruecker | 12922 Summer Throughway | Manteca | Illinois |
Werner | Berge | 536 Kohler Trace | North Amarafort | Louisiana |
Macey | Lemke | 50890 Blanca Fords | Heidenreichfield | Nebraska |
Aliza | Jaskolski | 8679 Yazmin Trace | Asheville | Ohio |
Laron | Pfeffer | 8601 Lang Corners | Laurianecester | Wyoming |
Samson | Dicki | 99371 Dickens Vista | Allenehaven | Ohio |
Desiree | Reichert | 763 Ora Pines | Khalilmouth | Vermont |
Tate | Stamm | 30509 Boyle Harbors | East Queen | Georgia |
Kim | Beer | 825 Norberto Extension | Jaedencester | New Jersey |
Viviane | Koelpin | 722 Mueller Crest | Arcadia | Massachusetts |
Milan | O'Keefe | 013 King Prairie | Sandyfurt | Nebraska |
Kameron | Hettinger | 163 Virginia Fork | New Zorachester | Wyoming |
Chet | Reilly | 0459 Haven Glens | Gwendolynhaven | Kentucky |
Rashawn | Blanda | 17035 Ernest Lane | Margareteborough | West Virginia |
Nathen | Pollich | 9604 Harley Street | Hackettview | Alabama |
Modesta | Windler | 08804 Walsh Lake | Hannahshire | Texas |
Lucas | Senger | 28874 Gerlach Crossing | Strongsville | Alaska |
Mathilde | Wehner | 141 Medhurst Extensions | New Paul | Texas |
Emmy | Runolfsson | 31588 Brenna Hollow | New Brigitte | Virginia |
Ara | Roberts | 62361 Dimitri Island | Amarillo | Indiana |
Frida | Crona | 9178 Susana Crest | Vergieburgh | Kentucky |
Kenyatta | Littel | 93163 Charley Summit | Kansas City | Arizona |
Kiel | Carroll | 696 Mellie Pike | South Gisselle | New Hampshire |
Skylar | Windler | 312 Haylee Row | Lake Lina | Tennessee |
Myrtis | Jones | 04067 Marquardt Locks | North Deja | Arizona |
Janis | Russel | 0923 Heaney Trail | Riverview | North Dakota |
Geovany | Batz | 6789 Madelynn Meadow | Fort Meaganburgh | Idaho |
Kellen | Flatley | 55886 Torphy Turnpike | Brekkeborough | Wisconsin |
Audie | Cronin | 612 Gladyce Inlet | North Hassan | Oklahoma |
Alexane | Kilback | 732 Magali Hollow | Lefflerstead | Massachusetts |
Bella | Kris | 3295 Yessenia Expressway | Biloxi | Indiana |
Grayson | Corwin | 437 D'Amore Hill | Beierland | Kansas |
Logan | Gislason | 53779 Reichel Rapid | Gideonshire | Nebraska |
Maiya | Lesch | 6999 Thalia Prairie | North Micheal | Virginia |
Aylin | Leffler | 32399 Thurman Island | Lake Aron | Missouri |
Sheila | Borer | 1169 Gabrielle Springs | Annamaecester | Kentucky |
Rylee | Ankunding | 194 Buckridge Hill | South Berta | Ohio |
Corene | Grimes | 641 Monahan Pines | East Princefurt | Illinois |
1import React, { FC, useMemo } from 'react';2import MaterialReactTable, { MRT_ColumnDef } from 'material-react-table';3import { Typography } from '@mui/material';4import { data, Person } from './makeData';56export const Example: FC = () => {7 const columns = useMemo<MRT_ColumnDef<Person>[]>(8 //column definitions...33 );3435 return (36 <MaterialReactTable37 columns={columns}38 data={data}39 enableBottomToolbar={false} //no need for bottom toolbar if no pagination40 enableColumnActions={false} //no need for column actions if none of them are enabled41 enableColumnFilters={false} //filtering does not work with memoized table body42 enableDensityToggle={false} //density does not work with memoized table body43 enableGlobalFilter={false} //searching does not work with memoized table body44 enableHiding={false} //column hiding does not work with memoized table body45 enablePagination={false} //pagination does not work with memoized table body46 enableSorting={false} //sorting does not work with memoized table body47 enableStickyHeader48 memoMode="table-body" // memoize table body to improve render performance, but break all features49 muiTableContainerProps={{ sx: { maxHeight: '500px' } }}50 renderTopToolbarCustomActions={() => (51 <Typography component="span" variant="h4">52 Static Memoized Table53 </Typography>54 )}55 />56 );57};5859export default Example;60
View Extra Storybook Examples