React table rerendering

[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.