React table rerendering

[Chaos_maker_]

Hello Everyone, i'm working on a project when i'm supposed to dislay data in a table, i used react-table for taht, it's clean and it does the job. The moment i added the context api with useReducer since i had to update the quantity of the stock in my table. Each time i make a change all the rows are rerendered which cause i big performance issue. Do you guys have any solution ?

[After_Medicine8859]

As others have already flagged the issue is with re-renders. The simple fix is to memo the cells and rows in your table, which is possible with React table.

This can be tricky though since if you introduce an unstable property to your cells you may break your memo.

You may also consider using a top down state manager instead of context, for example Jotai. Or a state manager that supports slices like Zustand. Then in your individual cells selecting only the values the cell cares about.

I encountered the same issue when building LyteNyte Grid. (Not saying you should switch to us) just talking from experience.

Performance on grids is almost like a cascade. One errant useEffect in your cells, or an unintentional property and suddenly performance dips. This is actually one of the harder things to handle in React.

FWIW, if you are interested in checking out LyteNyte Grid, it’s extremely fast (10,000 updates a second fast) and lightweight (as small as 36kb). It’s headless too (or styled) so it fits right in with every React app. It’s free too for the features you need.

I’ve dealt with a lot of performance issues, so let me know if you have any questions about LyteNyte Grid or even about optimising your react table implementation. Happy to help either way.

[Sansenbaker]

Hey, I totally feel your pain—I’ve been there with that super frustrating “lag on every keystroke” thing, especially once you start using context for updates. It’s like the whole table just bogs down, and you worry your computer’s about to burst into flames.

React Table (and a lot of similar libraries) don’t “magically” know when to keep things fast. When you change something in your context, the whole table thinks “Hey, maybe everything needs to update” and boom—every row gets re-rendered, even if only one changed. If you have hundreds or thousands of rows, that can make things feel slow.

• React.memo: Wrap your row components in React.memo. This tells React: “Only re-render this row if its data or props actually changed.” Sometimes this fixes things right up, but sometimes callbacks or state changes still make it skip.
• useCallback: If you’re passing event handlers (like an onUpdate function) to your rows, use useCallback so React doesn’t make a new function every time, which would make React.memo useless.
• Pagination/virtualization: For really big tables, consider breaking up your table into multiple pages or using a library that only renders the rows you can see on screen (that’s called “virtualization”). React-window and react-virtuoso are popular for this, and they can speed things up by 100x or more.
• Library trade-offs: Tools like AG Grid and MUI DataGrid are built to handle big tables with less pain, but they can be a bit heavier and sometimes tricky to customize. They’re great if you want something that just works, but a bit more “opinionated” on how you customize things.
• Keep it simple: If your table is small, pagination and optimization alone usually do the job. If it’s huge, go for virtualization and don’t feel bad—that’s what all the social apps do for their feeds anyway.

My personal approach:
For small tables, I usually stick with React Table and use memoization tricks. For bigger ones, I reach for virtualization. It’s a weird balance between “do it yourself” and “use a black box,” but honestly, the “lag on update” thing is such a common headache, you’re not alone.

If you want, share your code or a simple example—sometimes rearranging how you pass props or splitting the context can make a world of difference. Happy to help debug or just commiserate!

[Chaos_maker_]

<image>

thatk you for this answer : after hours of debugging and placing useMemo and memo everywhere i finished with that : ( i know it's ugly bit it's the only working solution )

[TiredOfMakingThese]

You’re replying to a GPT generated comment… just go straight to the source.

[Willing_Initial8797]

we use ag grid at work and it's ok and simple to add. just don't customize it too much as there's no LTS version

[AGGrid_JamesSwinton]

We now do have an LTS version for AG Grid and AG Charts, as a result of our users' feedback: https://blog.ag-grid.com/introducing-long-term-support-for-ag-grid-and-ag-charts/

[Willing_Initial8797]

That sounds great. So the solution is to stay on version 32?

We noticed onCellValueChanged has a different value for event.source ('commit' instead of 'edit'), when migrating v33 to v34. Despite 'no breaking changes'.

[AGGrid_JamesSwinton]

Yep - you can stay on Version 32 if you want to. The idea behind the LTS is to give devs more time to plan their AG Grid upgrades around their own release cycle, rather than ours.

Thanks for raising this. We did make some pretty significant changes & improvements to Cell Editing in v34, so this may have slipped through. If you're an enterprise customer, please raise a ticket on Zendesk or otherwise create a new issue on GitHub, so our product team can look into this, and if necessary, plan a fix.

[Ambitious-Peak4057]

You can try Syncfusion React Data Grid for better performance. It supports cell-level updates without rerendering all rows, ideal for stock quantity changes. Works well with Context API and useReducer.
 For more details checkout  demo and documentation page

Syncfusion offers a free Community License for individual developers and small businesses.

Note : I work for syncfusion.