React redux best practice for table row action

Question

I have a list of items. I render a Table component with this list. I want to add a checkbox for each row. Do I have to use a separate component for the table row iteself in order to set the current row style by checking it without rendering the whole table? Becasase now when I change the item's 'selected' property, the whole table is rendering.

Thanks :)

Answer 1

If your whole table re-render, you should clearly update your code to avoid that. Like you said, you can have a component for each row, so when a row update, only the row re-render. I'm strongly suggesting you to do this. Be sure to include a key prop to each row to avoid performance leak. You can also use the shouldComponentUpdate method to avoid useless re-render. When passing your props down from the table component to the row component, make sure the objects your are passing are unique on don't change too often. If after all this, you realised you row will update and re-render often, you can try using react-virtualized , this library renders only the rows that are visible on the screen. If you need more help, you can also share some code.