How to highlight only the selected row in a large table defined in React?

Question

I am working on a table component with React, and I ran into a problem with a large set of tables (> 500 rows). Indeed, when I try to highlight the line in which I clicked, I encounter a big leak in the speeches.

To achieve row selection, I hold the state containing the current active row in the top component, which consists of a container for all the rows in my table. When I click on a cell, I update this state with the row of which the cell is a part.

This calls the trigger of the render () method, which my top component and the whole application become slow due to the huge number of re-rendered elements.

How can I re-display only the selected row? Is there a general best practice to avoid reprocessing all components under the top component?

Answer 1

How about using CSS? You can use the hover property above each line and change the background color each time the mouse is finished or clicked. Slow performance when using the CSS property.

Good luck.

Answer 2

I recently created a grid component in response. My approach to quick response grid when selecting and navigating the keyboard:

• Do not display lines that are outside the viewport (visible range).
• Use a unique key for all lines, as indicated in the comments.
• ( ).
• , DOM . , getElementsByClassName . + .

, , , , .