On Index page, when editing 1 row, all rows are re-rendering (painfully slow). Using Reactjs with Ruby on Rails

Question

Using: - ruby "2.3.1" gem "rails", "5.0.0.1" gem "react_on_rails", "~> 6.3.2"

here's my question:

Issue

Clicking on a checkbox will add the contact to $$selectedContacts, but then every contact rerenders, which is very slow

![Contacts Index]
Here is a picture of the user page: ( a simple index page) http://take.ms/e7gXG

Questions

1. How do I properly use shouldComponentUpdate in Contact.jsx so that a contact row only rerenders when it's been changed?
2. Where should I use a container? Feel like using connect in Contact.jsx might not be the best thing?
3. any other suggestions

Here's a link to the gist: https://gist.github.com/heyogrady/4ba880c7ecffe18fdb70ad2d56e034cc

Answer 1

1. Change Contact to extend React.PureComponent, which is the newest way to use pure rendering. (docs)

2. A container component is usually the one with the business logic, and the presentational component is the one with the pure view logic. Redux sort of takes the place of a container component via the connect method. It's a matter of style, but a lot of the time it's easier when rendering a collection to just connect the parent, then map over the items and feed them to a dumb component that is not connected to Redux

3. The effectiveness of pure render will be mitigated by the fact that you are passing down data for the entire collection to each Contact. This means that if data for any single contact changes, then all the contacts will re-render because PureComponent can't know which props are relevant and which aren't. Therefore, you should pass only the data that each contact needs. I wrote a quick blog article on some pitfalls you can run into when using PureComponent.