[Table] Use makeStyles over withStyles

[oliviertassinari]

This effort is related to #10778. I have benchmarked the following (in production mode):

Performance client-side (+15%)

• Table Raw:
  
• Table Before:
  
• Table After:
  

Performance server-side (+10%)

TableRaw x 2,553 ops/sec ±2.01% (189 runs sampled)
-TableMui x 91.41 ops/sec ±3.62% (168 runs sampled)
+TableMui x 105 ops/sec ±0.83% (172 runs sampled)

DX (-1 component noise)

Before

After

Ideally, I would rather see MuiTableCell than ForwardRef(TableCell) cc @eps1lon

[mui-pr-bot]

@material-ui/core: parsed: +0.25% , gzip: +0.57%

Details of bundle changes.

Comparing: 3a8f79a...3946bb4

bundle	parsed diff	gzip diff	prev parsed	current parsed	prev gzip	current gzip
@material-ui/core	+0.25% 🔺	+0.57% 🔺	350,671	351,564	90,231	90,749
@material-ui/core/Paper	+0.03% 🔺	+0.09% 🔺	67,516	67,534	19,830	19,847
@material-ui/core/Paper.esm	+0.03% 🔺	+0.07% 🔺	61,114	61,133	18,881	18,895
@material-ui/core/Popper	0.00%	+0.02% 🔺	30,463	30,463	10,526	10,528
@material-ui/core/styles/createMuiTheme	0.00%	+0.09% 🔺	17,384	17,384	5,724	5,729
@material-ui/core/useMediaQuery	0.00%	-0.38%	2,469	2,469	1,043	1,039
@material-ui/lab	+0.04% 🔺	+0.03% 🔺	149,576	149,634	44,009	44,022
@material-ui/styles	+0.03% 🔺	+0.06% 🔺	52,700	52,716	15,438	15,447
@material-ui/system	+0.01% 🔺	-0.24%	17,136	17,138	4,528	4,517
Button	+0.02% 🔺	+0.08% 🔺	89,271	89,292	26,506	26,526
Modal	+0.02% 🔺	+0.03% 🔺	83,376	83,395	25,007	25,015
colorManipulator	0.00%	+0.08% 🔺	3,232	3,232	1,299	1,300
docs.landing	0.00%	0.00%	49,958	49,958	10,837	10,837
docs.main	+0.13% 🔺	+0.08% 🔺	646,052	646,905	200,814	200,981
packages/material-ui/build/umd/material-ui.production.min.js	+0.17% 🔺	+0.27% 🔺	299,178	299,674	82,966	83,191

Generated by 🚫 dangerJS against 3946bb4

[eps1lon]

Ideally, I would rather see MuiTableCell than ForwardRef(TableCell) cc @eps1lon

Agreed. We can probably gather this into a single helper that sets the appropriate statics. Right now this could include:

• displayName
• options
• useStyles

[oliviertassinari]

Agreed. We can probably gather this into a single helper that sets the appropriate statics. Right now this could include:

@eps1lon It's a great idea. For the default props issue. What do you think of duplicating the information? Once in the props destructuring for React and once in this helper for the generation of the documentation?

[eps1lon]

Agreed. We can probably gather this into a single helper that sets the appropriate statics. Right now this could include:

@eps1lon It's a great idea. For the default props issue. What do you think of duplicating the information? Once in the props destructuring for React and once in this helper for the generation of the documentation?

Should be good enough as a temporary solution. Seems like a good time to write a custom defaultProps resolver.

[oliviertassinari]

@eps1lon Updated. What do you think of the solution?

[eps1lon]

I guess it makes more sense to use the component as the first parameter. useStyles is more likely to get removed at some point than Component

[oliviertassinari]

I can't. If I swap the arguments, react-docgen does no longer "see" the component in the file.

[eps1lon]

This should be addressed in reactjs/react-docgen#343

[jeremy-coleman]

If using function components, just pass in props with arguments .. function MuiDiv({someKey=someValue, ...props}){}

[jeremy-coleman]

displayName over rides forwardRef in devtools btw

[joshwooding]

If using function components, just pass in > props with arguments .. function MuiDiv({someKey=someValue, ...props}){}

We try not to destructure early #15344 (comment)

[oliviertassinari]

I'm closing. To revisit in the future.