MRT logoMaterial React Table

On This Page

    Memoize Components Guide

    Material React Table a memoMode table option that will allow you to explicitly memoize either 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!

    Using these memoization features are usually unnecessary, but available if you need them. They can break some features, so use them with caution.

    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

    These features are incompatible with cell memoization because they 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

    const table = useMaterialReactTable({
    columns,
    data,
    enableDensityToggle: false, //density does not work with memoized cells
    memoMode: 'cells', // memoize table cells to improve render performance, but break some features
    })

    Demo

    Open StackblitzOpen Code SandboxOpen on GitHub
    Memoized Cells
    AlbertaKautzer82321 Reichert BridgeArmandolandMississippi
    ImeldaHarber866 Kuvalis GrovesNorth KieranIowa
    LeonieHickle6094 Hudson ParkMandytownOregon
    CristalCarroll41222 Webster OvalSouth BlazeNew Mexico
    GoldaBrakus13718 Blick PortFort TressachesterNew Mexico
    JackelineLittle130 Kuhlman CreekGordonworthOhio
    KarsonFlatley9494 McCullough StravenuePricemouthDelaware
    JonathanBednar79954 Klein LoafAbdielvilleIndiana
    RockyFunk602 Josianne RampFort PearlworthMississippi
    AnthonyStokes71571 Santa MissionBeaumontAlaska
    BrendenGislason1291 Lyla GatewayLaceyNorth Carolina
    WebsterAnkunding229 Yasmin PassageDoylefurtArizona
    MarleyTowne5895 Bartoletti FallsKendale LakesIndiana
    AlexandrineHintz89462 Halvorson JunctionJerrodviewMissouri
    XavierLowe829 Rodriguez MallGrantbergTexas
    CamdenKemmer3110 Andreane VillagesCorpus ChristiNebraska
    AshtynHermiston6087 Howell PortsCastro ValleyTennessee
    KayleeBaumbach9576 Kristina StravenueSouth BeverlyColorado
    EugeneVonRueden43151 Rogelio AlleyBalistrerifurtTennessee
    RobinMcDermott5032 Batz ValleysShaynaburyMontana
    1-20 of 86

    Source Code

    1import { useMemo } from 'react';
    2import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
    3import { Typography } from '@mui/material';
    4import { data, type Person } from './makeData';
    5
    6export const Example = () => {
    7 const columns = useMemo<MRT_ColumnDef<Person>[]>(
    8 //column definitions...
    33 );
    34
    35 return (
    36 <MaterialReactTable
    37 columns={columns}
    38 data={data}
    39 //just for demo purposes
    40 defaultColumn={{
    41 Cell: ({ renderedCellValue }) => {
    42 //see how often cells are re-rendered
    43 // console.info('render cell', cell.id);
    44 return <>{renderedCellValue}</>;
    45 },
    46 }}
    47 editDisplayMode="row"
    48 enableColumnOrdering
    49 enableDensityToggle={false} //density toggle is not compatible with memoization
    50 enableEditing
    51 enableColumnPinning
    52 enableRowSelection
    53 enableStickyHeader
    54 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 Cells
    61 </Typography>
    62 )}
    63 />
    64 );
    65};
    66
    67export 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

    These features are incompatible with row memoization 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,

    const table = useMaterialReactTable({
    columns,
    data,
    enableDensityToggle: false, //density does not work with memoized rows
    enableHiding: false, //column hiding does not work with memoized rows
    memoMode: 'rows', // memoize table rows to improve render performance, but break a lot of features
    })

    Demo

    Memoized Rows
    KyleighPadberg57128 Layla CanyonSedrickfurtAlabama
    MadelynnConroy006 Edna WellOak LawnUtah
    LisetteKing37090 Jordon LightFort NatalieOregon
    EmmetMedhurst27667 Tillman DrivePittsburgVermont
    MelissaStark70121 Gleichner ExpresswayEast CaryFlorida
    ThaddeusDavis250 Maybell SpringsEast NorvalmouthMissouri
    NettieFlatley96048 Abernathy WaySouth JackieMaine
    NarcisoVeum164 Prosacco EstateLake LinwoodsteadFlorida
    GiovaniWolff66888 Cullen CenterNew NicolashavenRhode Island
    JalenCormier50679 Darby DriveJamaalburghTexas
    JasminGibson72724 Crist GrovesWest HarleyIllinois
    MohammadHamill443 Wilhelm PlazaTerre HauteNew Mexico
    MiloDicki778 Wilfred MeadowKrislandArkansas
    ErichLynch60472 Price ParksLake MavisIllinois
    DeontaeBoyle4573 Zboncak UnderpassDandrefortMichigan
    AntwonTurcotte80006 Luettgen WellNew LucienneshireWest Virginia
    MarcellaHermann0339 Kunde JunctionsTallahasseeAlaska
    MaudAbernathy3590 Shayna PathNorth AftonSouth Carolina
    AsaCrist675 Tamara CornerNorth MelodyNew Mexico
    AnitaWiza47680 Rhianna RoadsWelchhavenOhio
    1-20 of 88

    Source Code

    1import { useMemo } from 'react';
    2import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
    3import { Typography } from '@mui/material';
    4import { data, type Person } from './makeData';
    5
    6export const Example = () => {
    7 const columns = useMemo<MRT_ColumnDef<Person>[]>(
    8 //column definitions...
    33 );
    34
    35 return (
    36 <MaterialReactTable
    37 columns={columns}
    38 data={data}
    39 //just for demo purposes
    40 defaultColumn={{
    41 Cell: ({ renderedCellValue }) => {
    42 //see how often cells are re-rendered
    43 // console.info('render cell', cell.id);
    44 return <>{renderedCellValue}</>;
    45 },
    46 }}
    47 enableDensityToggle={false} //density toggle is not compatible with memoization
    48 enableHiding={false}
    49 enableStickyHeader
    50 initialState={{ pagination: { pageSize: 20, pageIndex: 0 } }}
    51 memoMode="rows"
    52 muiTableContainerProps={{ sx: { maxHeight: '500px' } }}
    53 renderTopToolbarCustomActions={() => (
    54 <Typography component="span" variant="h4">
    55 Memoized Rows
    56 </Typography>
    57 )}
    58 />
    59 );
    60};
    61
    62export default Example;
    63

    Memoizing Table Body

    If your table never needs to re-render and you do not 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

    const table = useMaterialReactTable({
    columns,
    data,
    enableColumnActions: false, //no need for column actions if none of them are enabled
    enableColumnFilters: false, //filtering does not work with memoized table body
    enableDensityToggle: false, //density does not work with memoized table body
    enableGlobalFilter: false, //searching does not work with memoized table body
    enableHiding: false, //column hiding does not work with memoized table body
    enablePagination: false, //pagination does not work with memoized table body
    enableSorting: false, //sorting does not work with memoized table body
    memoMode: 'table-body', // memoize table body to improve render performance, but break all features
    })

    Demo

    Static Memoized Table
    ErnaHaag8371 Legros MountainLeonportWyoming
    JudyKoepp88662 Nelda CovesFarmington HillsAlaska
    CarmineAdams543 Herzog MountEast EleanoraviewTexas
    NeomaHettinger570 Mason CourseJeniferhavenNew Jersey
    HuldaHauck859 Kilback RidgesAzusaGeorgia
    GregoryBayer900 Emely ShoresMinnetonkaMissouri
    EdgardoKlocko64056 Malachi StationKautzervilleNew Hampshire
    FrancescaO'Hara84041 Kaleb ClubLake AlizeMassachusetts
    JedediahMcGlynn64073 Lynch BurgSouth TitusTexas
    AriannaWest9007 Gottlieb CliffsRockwallIllinois
    LizzieGrant359 Kristy SquareNorth ConradfortKentucky
    HobartHarris696 Grant LockAnahibergArizona
    BaileyKessler31389 Gerhard MeadowBirminghamNew Hampshire
    MedaDenesik2454 Shana PlainsBradtkelandIllinois
    CruzPurdy761 Boyer VistaBolingbrookArizona
    AbdulLeuschke7263 Maynard GreensPort JazmyneMaine
    AliaYost40402 Fahey NeckLehnerstadLouisiana
    MaribelJohns093 Alvis LightsPort LeathaburyPennsylvania
    BertrandPagac660 Smith CanyonWest CraigFlorida
    BennieLueilwitz04589 Simonis CircleKozeycesterTennessee
    AdelleWiza90890 Chelsie ManorsKuhlmanvilleOklahoma
    RosendoSkiles293 Barry RestGuiseppeboroMaine
    AnahiHowell844 Marilyne RoadKipportArkansas
    WilbertCummings5031 Chandler CenterWest FlorenceConnecticut
    DaphneReichert0415 Ratke JunctionTroyOklahoma
    VladimirLesch73073 Elinor VilleWest HopeMichigan
    JaydeShields4424 Zane GlensAuersideFlorida
    JennieReichert007 Zboncak LightAlyciahavenDelaware
    LeilaniRohan16737 Elta RoadsOsinskichesterAlabama
    EmerySchultz40078 Lolita OvalWauwatosaOregon
    AishaBosco466 Crist CovesNorth HenrietteConnecticut
    ZitaMraz788 Malinda PlazaEast JaydaWisconsin
    KelvinWill07225 Kub RueVacavilleWyoming
    SalmaHowe724 Marvin LakesWest AlanaviewIndiana
    MayBraun1700 Gerlach RouteFort CarsonAlabama
    HelenaSenger05454 Mills ViewFort KiarramouthTexas
    SallieWintheiser645 O'Conner PlaceKihnlandWyoming
    SydniMcGlynn124 Brock BranchFort JerelMaryland
    GennaroCarroll58234 Runolfsson MountainNikolascesterMaine
    SidneyKuvalis186 Donavon CornersWest MarcellusfortTexas
    TedO'Hara47585 Halie HarborsLake KyleMichigan
    JeffreyWiegand77672 Kilback CurveWest JazminboroUtah
    GeoMarks122 Misty TraceLouveniasteadMichigan
    JaydeCrooks019 Garnet PassageCroninfieldDelaware
    ZulaKuphal865 Dach StravenueFraminghamNorth Carolina
    KatarinaLuettgen69556 Jayden SpringsFreemanchesterNew Mexico
    JabariBarrows988 Halvorson HillsWest AlessandraportNew Jersey
    AurelieKohler0568 Shields ManorsLakewoodMaryland
    NelleSauer21492 Huels WalkCitrus HeightsNorth Carolina
    NatKonopelski50202 Jovan UnderpassCornellsideVermont
    JadaGraham561 Samson VistaPort ToneyviewLouisiana
    LaurianneSawayn247 Tremblay RapidVancevilleIdaho
    ShemarKirlin7049 Skiles FieldNorth DudleyAlaska
    EdnaBrakus899 Edd CrossingNew JadynTexas
    LillyYost085 Milton VistaLindatonLouisiana
    ClemmieHaley1242 Chesley GreensSmyrnaHawaii
    RobbBernhard717 Enrique VillageGiovannimouthIdaho
    AdrainWill711 Alycia CornerEast MyraSouth Dakota
    MadelynnVolkman20823 Marcos MountainRunolfsdottircesterWisconsin
    WinifredChamplin172 Daisy MillNorth PatsyhavenMontana
    CoySchowalter890 Alverta PlazaHadleyfortWisconsin
    MaryseBeer4664 Stefan CirclesLake IssacNew Hampshire
    NoreneJacobi52793 Hegmann IsleErieAlaska
    JohnathonBarton253 Cayla DaleBlandasideFlorida
    RamiroLang099 Garth StationSpringfieldKansas
    KristofferGrady0916 MacGyver GatewayEast LouArkansas
    JaunitaHills4887 Phyllis NeckSouth IsaiahmouthOhio
    NikolasSchowalter285 Stanton LockNorth JonathonGeorgia
    AnsleyWolff505 Jerde MountainsSouth BrandiPennsylvania
    MaudHegmann09899 Mohr ShoresErinfortAlaska
    SheaKohler2215 Angela ValleyCletatownKentucky
    FernandoShields25912 Jaren NeckCheyenneMississippi
    KiraWilkinson33035 Otilia MissionLake KareemKentucky
    WilfordMonahan27850 Chloe LaneNyafortNorth Dakota
    JackelineSchamberger925 Anjali RowKiehnmouthKentucky
    GersonWyman51420 Jakubowski IslandShanyboroWashington
    KenMedhurst55814 Volkman WaysNew MarleysideAlabama
    EdgardoDavis4098 Boehm MountainLake AdityaburghAlaska
    ConcepcionHaag5306 Ludie PortLake DelaneytonNew Mexico
    NikitaAdams071 Nick RoadsPort JadaMichigan
    NorbertoGreen578 Noel FallsGutkowskiburghNorth Carolina
    MatildeKerluke3555 Nolan CommonLake ElainaMontana
    VerdaBartoletti14524 Hand SpringsDomenicshireAlabama
    AdeliaEmmerich6461 Ellsworth JunctionsEast BridgetteMassachusetts
    RomaAnkunding038 Rutherford BypassCreminlandHawaii
    BentonWill027 Lakin UnionPort MelanyNebraska
    JaysonRosenbaum696 Abshire OrchardPalm Beach GardensMississippi
    AbbeyHoeger308 Hirthe BypassLakelandMassachusetts
    StanDuBuque54220 Howe TrailNew VirgilNew Hampshire
    ThelmaMarvin8316 Anissa SkywayBellevueTexas
    AdelaMosciski7175 Scarlett InletMalloryfurtWyoming
    NarcisoHessel2582 Telly SpursDublinGeorgia
    JazlynAnderson7113 Kelley WallEast VitoGeorgia
    EthaHudson305 Kiera CommonEast MiracleMichigan
    MoniqueKuhic65159 Wava LodgeOklahoma CityMontana
    CieloMills07954 West RoadSunrise ManorWyoming
    LlewellynFrami90812 Gorczany JunctionMitchellvilleMissouri
    CierraKing0797 Reinger FortConncesterMassachusetts
    FrancescoSchuppe5247 Lockman DaleLake JacintocesterOhio
    ValentinaStoltenberg3049 Oberbrunner IsleOsinskifieldMontana
    CarmelDooley6079 Madisyn CrestRivertonNebraska
    BettyeLittle14055 Bette ViewsNew OlenArizona
    KimJohnston9157 Gleason IslandsNorth TaniafieldMaine
    RebekahHackett20891 Darrion CurveRyleyhavenArizona
    GuyBrown4856 Rohan FordFayboroughFlorida
    GusWehner533 Hayes ForgeRancho Palos VerdesOregon
    HowellHudson6079 Treva FallsLake DavidVermont
    KeshawnGrimes0865 Krystina LightAmosfurtLouisiana
    LaurettaBartoletti48011 Howe ShoreLake KhalidAlaska
    GaetanoKlein8433 Wilkinson ForksSchaefermouthMassachusetts
    JarredWyman7308 O'Reilly SquaresFort AlbachesterNew Hampshire
    KaitlynCassin252 Parisian LocksNorth AugustusvilleVirginia
    CydneyGleichner072 Gretchen WalksYoshikoshireMaryland
    DaphneKoelpin21942 Agustina ForgeLake DarrickVermont
    JordaneBrekke1187 Ervin DamUllrichbergHawaii
    SamanthaFeest0407 Jaunita RanchGreeleyUtah
    AustinSpencer4251 Maureen PlainAufderharburyNorth Carolina
    ThoraAnkunding1197 Huel CliffsShorelineMaryland
    RudyMertz9903 Randall MissionMelyssaboroughMaryland
    EbonyKeebler37823 Larkin WayDeefurtMichigan
    MurielRuecker12922 Summer ThroughwayMantecaIllinois
    WernerBerge536 Kohler TraceNorth AmarafortLouisiana
    MaceyLemke50890 Blanca FordsHeidenreichfieldNebraska
    AlizaJaskolski8679 Yazmin TraceAshevilleOhio
    LaronPfeffer8601 Lang CornersLaurianecesterWyoming
    SamsonDicki99371 Dickens VistaAllenehavenOhio
    DesireeReichert763 Ora PinesKhalilmouthVermont
    TateStamm30509 Boyle HarborsEast QueenGeorgia
    KimBeer825 Norberto ExtensionJaedencesterNew Jersey
    VivianeKoelpin722 Mueller CrestArcadiaMassachusetts
    MilanO'Keefe013 King PrairieSandyfurtNebraska
    KameronHettinger163 Virginia ForkNew ZorachesterWyoming
    ChetReilly0459 Haven GlensGwendolynhavenKentucky
    RashawnBlanda17035 Ernest LaneMargareteboroughWest Virginia
    NathenPollich9604 Harley StreetHackettviewAlabama
    ModestaWindler08804 Walsh LakeHannahshireTexas
    LucasSenger28874 Gerlach CrossingStrongsvilleAlaska
    MathildeWehner141 Medhurst ExtensionsNew PaulTexas
    EmmyRunolfsson31588 Brenna HollowNew BrigitteVirginia
    AraRoberts62361 Dimitri IslandAmarilloIndiana
    FridaCrona9178 Susana CrestVergieburghKentucky
    KenyattaLittel93163 Charley SummitKansas CityArizona
    KielCarroll696 Mellie PikeSouth GisselleNew Hampshire
    SkylarWindler312 Haylee RowLake LinaTennessee
    MyrtisJones04067 Marquardt LocksNorth DejaArizona
    JanisRussel0923 Heaney TrailRiverviewNorth Dakota
    GeovanyBatz6789 Madelynn MeadowFort MeaganburghIdaho
    KellenFlatley55886 Torphy TurnpikeBrekkeboroughWisconsin
    AudieCronin612 Gladyce InletNorth HassanOklahoma
    AlexaneKilback732 Magali HollowLefflersteadMassachusetts
    BellaKris3295 Yessenia ExpresswayBiloxiIndiana
    GraysonCorwin437 D'Amore HillBeierlandKansas
    LoganGislason53779 Reichel RapidGideonshireNebraska
    MaiyaLesch6999 Thalia PrairieNorth MichealVirginia
    AylinLeffler32399 Thurman IslandLake AronMissouri
    SheilaBorer1169 Gabrielle SpringsAnnamaecesterKentucky
    RyleeAnkunding194 Buckridge HillSouth BertaOhio
    CoreneGrimes641 Monahan PinesEast PrincefurtIllinois

    Source Code

    1import { useMemo } from 'react';
    2import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
    3import { Typography } from '@mui/material';
    4import { data, type Person } from './makeData';
    5
    6export const Example = () => {
    7 const columns = useMemo<MRT_ColumnDef<Person>[]>(
    8 //column definitions...
    33 );
    34
    35 return (
    36 <MaterialReactTable
    37 columns={columns}
    38 data={data}
    39 enableBottomToolbar={false} //no need for bottom toolbar if no pagination
    40 enableColumnActions={false} //no need for column actions if none of them are enabled
    41 enableColumnFilters={false} //filtering does not work with memoized table body
    42 enableDensityToggle={false} //density does not work with memoized table body
    43 enableGlobalFilter={false} //searching does not work with memoized table body
    44 enableHiding={false} //column hiding does not work with memoized table body
    45 enablePagination={false} //pagination does not work with memoized table body
    46 enableSorting={false} //sorting does not work with memoized table body
    47 enableStickyHeader
    48 memoMode="table-body" // memoize table body to improve render performance, but break all features
    49 muiTableContainerProps={{ sx: { maxHeight: '500px' } }}
    50 renderTopToolbarCustomActions={() => (
    51 <Typography component="span" variant="h4">
    52 Static Memoized Table
    53 </Typography>
    54 )}
    55 />
    56 );
    57};
    58
    59export default Example;
    60

    View Extra Storybook Examples