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?
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?
