[core] Update getDisplayName to handle React.memo

[dantman]

getDisplayName handles forwardRef() but not memo() as a result when memo() is used with withStyles() the displayName is not passed on and css classes do not get proper names.

• I have followed (at least) the PR section of the contributing guide.

[eps1lon]

Great pull request.

What about the changes to the examples/? Was this by accident?

[oliviertassinari]

I wonder, could isFragment and isMemo be used instead to avoid React's internals access?

[dantman]

I tried switching to typeOf(Component), however IIRC it appeared that for memo typeOf actually returns Component.type.$$typeof. Not sure isMemo would work since most of the is* functions use typeOf.

[oliviertassinari]

Right, so it's already as good as it can get.

[dantman]

Yes, for now.

My real end-goal is for React to export getComponentName, in which case we won't need to bother with these hacks at all (see 15207 and 14319).

[mui-pr-bot]

Details of bundle changes.

Comparing: f2d74e9...1ae3d94

bundle	Size Change	Size	Gzip Change	Gzip
@material-ui/core[umd]	▲ +7 B (0.00% )	318 kB	▲ +3 B (0.00% )	92 kB
@material-ui/core	--	362 kB	--	98.8 kB
@material-ui/lab	--	194 kB	--	57.2 kB
@material-ui/styles	--	51.4 kB	--	15.4 kB
@material-ui/system	--	16.5 kB	--	4.32 kB
Alert	--	83.8 kB	--	26.3 kB
AlertTitle	--	64.5 kB	--	20.3 kB
AppBar	--	64.4 kB	--	20.2 kB
Autocomplete	--	132 kB	--	41.4 kB
Avatar	--	65.6 kB	--	20.7 kB
AvatarGroup	--	62.6 kB	--	19.7 kB
Backdrop	--	68.2 kB	--	21.1 kB
Badge	--	65.7 kB	--	20.4 kB
BottomNavigation	--	62.7 kB	--	19.7 kB
BottomNavigationAction	--	75.9 kB	--	24 kB
Box	--	72.2 kB	--	21.9 kB
Breadcrumbs	--	68.1 kB	--	21.4 kB
Button	--	80.1 kB	--	24.5 kB
ButtonBase	--	74.4 kB	--	23.3 kB
ButtonGroup	--	83.6 kB	--	25.6 kB
Card	--	63.2 kB	--	19.8 kB
CardActionArea	--	75.5 kB	--	23.8 kB
CardActions	--	62.4 kB	--	19.6 kB
CardContent	--	62.3 kB	--	19.5 kB
CardHeader	--	65.4 kB	--	20.6 kB
CardMedia	--	62.7 kB	--	19.7 kB
Checkbox	--	83.4 kB	--	26.3 kB
Chip	--	83 kB	--	25.4 kB
CircularProgress	--	64.4 kB	--	20.3 kB
ClickAwayListener	--	3.91 kB	--	1.55 kB
Collapse	--	68.4 kB	--	21.2 kB
colorManipulator	--	3.88 kB	--	1.52 kB
Container	--	63.5 kB	--	19.9 kB
CssBaseline	--	62.3 kB	--	19.6 kB
Dialog	--	83.4 kB	--	26 kB
DialogActions	--	62.4 kB	--	19.6 kB
DialogContent	--	62.6 kB	--	19.6 kB
DialogContentText	--	64.4 kB	--	20.2 kB
DialogTitle	--	64.6 kB	--	20.3 kB
Divider	--	63 kB	--	19.8 kB
docs.landing	--	56.8 kB	--	15.6 kB
docs.main	--	604 kB	--	196 kB
Drawer	--	85.2 kB	--	25.9 kB
ExpansionPanel	--	72.7 kB	--	22.7 kB
ExpansionPanelActions	--	62.4 kB	--	19.6 kB
ExpansionPanelDetails	--	62.3 kB	--	19.5 kB
ExpansionPanelSummary	--	78.5 kB	--	24.8 kB
Fab	--	77.2 kB	--	24.1 kB
Fade	--	23.6 kB	--	8.01 kB
FilledInput	--	73.9 kB	--	23 kB
FormControl	--	64.8 kB	--	20.2 kB
FormControlLabel	--	65.9 kB	--	20.6 kB
FormGroup	--	62.3 kB	--	19.6 kB
FormHelperText	--	63.7 kB	--	20 kB
FormLabel	--	63.8 kB	--	19.8 kB
Grid	--	65.4 kB	--	20.5 kB
GridList	--	62.8 kB	--	19.7 kB
GridListTile	--	64.1 kB	--	20.1 kB
GridListTileBar	--	63.6 kB	--	19.9 kB
Grow	--	24.2 kB	--	8.22 kB
Hidden	--	66.3 kB	--	20.8 kB
Icon	--	63.1 kB	--	19.8 kB
IconButton	--	76.5 kB	--	23.9 kB
Input	--	72.9 kB	--	22.8 kB
InputAdornment	--	65.4 kB	--	20.6 kB
InputBase	--	71 kB	--	22.3 kB
InputLabel	--	65.7 kB	--	20.5 kB
LinearProgress	--	65.7 kB	--	20.5 kB
Link	--	67 kB	--	21.1 kB
List	--	62.7 kB	--	19.6 kB
ListItem	--	77.5 kB	--	24.2 kB
ListItemAvatar	--	62.5 kB	--	19.5 kB
ListItemIcon	--	62.5 kB	--	19.6 kB
ListItemSecondaryAction	--	62.3 kB	--	19.5 kB
ListItemText	--	65.3 kB	--	20.5 kB
ListSubheader	--	63.1 kB	--	19.8 kB
Menu	--	89.1 kB	--	27.4 kB
MenuItem	--	78.6 kB	--	24.5 kB
MenuList	--	66.4 kB	--	20.8 kB
MobileStepper	--	68.2 kB	--	21.4 kB
Modal	--	14.5 kB	--	5.04 kB
NativeSelect	--	77.2 kB	--	24.3 kB
NoSsr	--	2.19 kB	--	1.04 kB
OutlinedInput	--	74.9 kB	--	23.3 kB
Pagination	--	85.5 kB	--	26.3 kB
PaginationItem	--	81.2 kB	--	25 kB
Paper	--	62.7 kB	--	19.6 kB
Popover	--	83.5 kB	--	25.8 kB
Popper	--	28.8 kB	--	10.3 kB
Portal	--	2.92 kB	--	1.3 kB
Radio	--	84.4 kB	--	26.6 kB
RadioGroup	--	64.8 kB	--	20.1 kB
Rating	--	70.8 kB	--	22.8 kB
RootRef	--	4.24 kB	--	1.64 kB
ScopedCssBaseline	--	63.2 kB	--	19.9 kB
Select	--	117 kB	--	34.6 kB
Skeleton	--	63.3 kB	--	20 kB
Slide	--	25.7 kB	--	8.74 kB
Slider	--	77 kB	--	24.2 kB
Snackbar	--	75.7 kB	--	23.7 kB
SnackbarContent	--	63.9 kB	--	20.1 kB
SpeedDial	--	86.6 kB	--	27.3 kB
SpeedDialAction	--	119 kB	--	37.6 kB
SpeedDialIcon	--	64.9 kB	--	20.3 kB
Step	--	63 kB	--	19.8 kB
StepButton	--	82.7 kB	--	26.2 kB
StepConnector	--	63.1 kB	--	19.9 kB
StepContent	--	69.5 kB	--	21.8 kB
StepIcon	--	65 kB	--	20.3 kB
StepLabel	--	69 kB	--	21.7 kB
Stepper	--	65.2 kB	--	20.6 kB
styles/createMuiTheme	--	16.6 kB	--	5.85 kB
SvgIcon	--	63.4 kB	--	19.8 kB
SwipeableDrawer	--	92.6 kB	--	28.9 kB
Switch	--	82.5 kB	--	26 kB
Tab	--	76.7 kB	--	24.3 kB
Table	--	62.9 kB	--	19.7 kB
TableBody	--	62.4 kB	--	19.5 kB
TableCell	--	64.4 kB	--	20.3 kB
TableContainer	--	62.3 kB	--	19.5 kB
TableFooter	--	62.5 kB	--	19.5 kB
TableHead	--	62.4 kB	--	19.5 kB
TablePagination	--	144 kB	--	42 kB
TableRow	--	62.8 kB	--	19.7 kB
TableSortLabel	--	77.8 kB	--	24.4 kB
Tabs	--	85.8 kB	--	27.2 kB
TextareaAutosize	--	5.12 kB	--	2.14 kB
TextField	--	126 kB	--	36.6 kB
ToggleButton	--	76.5 kB	--	24.2 kB
ToggleButtonGroup	--	63.5 kB	--	20 kB
Toolbar	--	62.7 kB	--	19.7 kB
Tooltip	--	103 kB	--	32.4 kB
TreeItem	--	74.3 kB	--	23.5 kB
TreeView	--	67 kB	--	21.1 kB
Typography	--	64 kB	--	20 kB
useAutocomplete	--	14.7 kB	--	5.31 kB
useMediaQuery	--	2.58 kB	--	1.06 kB
Zoom	--	23.6 kB	--	8.12 kB

Generated by 🚫 dangerJS against 1ae3d94

[oliviertassinari]

I hope we will able to rely on React's API soon :) @dantman Well done!

[eps1lon]

I hope we will able to rely on React's API soon :) @dantman Well done!

I guess the core team doesn't want to add public method for this since it's only useful for hoc in the first place. Hooks are the future. Though they will deny that class components are legacy (which they apparently are looking at the display name issue) 😆