1

I have a component that will load a table with almost 300 rows and each row will have action items like verified / unverified, when we click on any action I'm updating the respective status and updating the state to re-render the component but each action it is taking at least couple of seconds to re-render the component, but I need some efficient way to manage this because actions should not be delayed (users are not liking the way its taking time.)

Example code :

@Reinier68

        const copyTableData= [...props.tableData] // Copy tabledata
        copyTableData[index].status= "Verified"  // Updating status 
        props.settableData(copyTableData); // Seeting state again



enter code here
Sumanth Maguluri
  • 11
  • 5
  • Are you making any api calls ? – Sujith Sandeep Jun 02 '22 at 11:38
  • Show the code for the table. If you have a good `key` set on the elements, only the row that has to be updated should re-render instead of the entire table and all the 300 rows. – Reinier68 Jun 02 '22 at 11:39
  • Rendering 300 rows without virtualization will be slow in React which does expensive DOM diffing on re-render. You can try and use `useMemo` and `memo` to speed things up (don't re-render rows that didn't change). Also `contain: paint` on the scrolling element. But that many rows you're better off virtualizing. You can prob just about get away with memoizing the Rows which don't change with 300. – Dominic Jun 02 '22 at 11:40
  • @SujithSandeep, with API its taking more time so now I'm trying to do it in UI itself. – Sumanth Maguluri Jun 02 '22 at 11:45
  • If it is loading 300 values with action items. It is better to display it with pagination. If not, You can use `useMemo()` hook which re renders the particular component only whenany changes are make with those 300 values. For other operations, This particular component will not be re rendered. – Sujith Sandeep Jun 02 '22 at 11:48
  • @Reinier68 Updated code in the above post – Sumanth Maguluri Jun 02 '22 at 11:50
  • @SumanthMaguluri Show us how you render the table aswell – Reinier68 Jun 02 '22 at 11:53
  • @Dominic don't re-render rows that didn't change How can i achieve this, for updating the status of one row i need to re-render whole table, can we do something about thi ? – Sumanth Maguluri Jun 02 '22 at 11:55
  • @SumanthMaguluri you need to post more of your code to know – Dominic Jun 02 '22 at 12:22

0 Answers0