Working with data that updates A LOT
So I work for a stock trading platform and we're rebuilding our frontend from the ground up. I was looking at Tanstack Table for displaying our user's positions.
This worked fine, but the issues started when I added a toggle to show/hide a subcomponent that shows the open orders for a certain position.
Everything works fine, but since we're displaying stock tickers with very frequently changing data, the table is being re-rendered non-stop (multiple times a second), because the data is changing non-stop. Everything still looks fine, but the toggle for collapsing is now very unresponsive, because the table is constantly re-rendering.
I fixed this by adding subcomponents that consume the tickers, so they re-render and not the table itself. This works perfectly except now I lose the ability to sort my rows through Tanstack Table.
As I am quite new to React it is possible that I am missing something. State management is being done with Redux Toolkit, I memoized all relevant components and selectors etc.
Any pointers/suggestions?
5 Replies
vicious-gold•3y ago
I have the same issues with rerenders
adverse-sapphireOP•3y ago
What is your issue @delonge2699 ?
I've decided I'm going to move away from redux selectors for this and manually rerender the component every 500 ms
vicious-gold•3y ago
I store clicked rows indexes in toolkit and every click updates table, I tried to memoize cells
adverse-sapphireOP•3y ago
why do you store it in toolkit and not local state in component?
vicious-gold•3y ago
Because I need it to make http request at the another component,using selected row ID