Can't update single table cell only

[SergeyAlexeev]

I have a table and want to update only the first cell. When I inspect my page using React Developer Tools, I see that all table cells are updated.

• [x ] This is not a v0.x issue.
• [x ] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

Only the first cell should be rerendered.

Current Behavior 😯

All table cells are rerendered.

Steps to Reproduce 🕹

1. Refer to this sample
2. Open the app in new window
3. Open React Dev Tools and click on the 'Update the first cell button.'
4. You will see that all table cells are highlighted.
5. Also you can see how the 'plain html' sample works.

BTW, I suppose, I can be fixed by using the React.PureComponent for the TableCell component.

Context 🔦

Your Environment 🌎

Tech	Version
Material-UI	v3.7.0
React	v16.5.2
Browser	Google Chrome v71.0.3578.98

[oliviertassinari]

@SergeyAlexeev A first performance optimization was performed in #13832. I'm looking at this issue.

[oliviertassinari]

I have updated the codesandbox to better match a naked implementation.

const Tbody = props => <tbody {...props} />;
const Table = props => <table {...props} />;
const Tr = props => <tr {...props} />;
const Td = props => <td {...props} />;

I fail to see any difference:

The update propagation looks normal to me. https://codesandbox.io/s/zx8q8p6nwm

By the way, we are planning a hook migration, it should allow Material-UI to use less intermediary React components, making us more competitive with a naked version.

[oliviertassinari]

Assuming the described behavior is expected, I'm closing. Note that we have two leverages that we will soon use to reduce the withStyles overhead: the hook API +30% and JSS v10 +10% #14006.