Migration to hooks

[joshwooding]

We've made a great start in the conversion to Function Components. This is just an issue to keep track of what we class components (public and internal) we have left. I haven't checked if it's feasible to convert these components, if it's necessary or if it's worth it.

Core

• ScrollbarSize [ScrollbarSize] Convert to function component #15233
• FormControl [FormControl] Convert to function component #15208
• Collapse [Collapse] Convert to function component #15248
• Tooltip [Tooltip] Convert to function component #15291
• Textarea [Textarea] Refactor the implementation #15331
• Slide [Slide] Convert to function component #15344
• Ripple [Ripple] Convert to function component #15345
• Popper [Popper] Convert to function component #15405
• SelectInput [SelectInput] Convert to function component #15410
• Snackbar [Snackbar] Convert to function component #15504
• Portal [Portal] Migrate to React hooks #15399
• InputBase [InputBase] Convert to function component #15446
• ButtonBase [ButtonBase] Convert to function component #15716
• Popover [Popover] Convert to function component #15623
• SwipeableDrawer [SwipeableDrawer] Convert to function component #15947
• WithWidth [withWidth] Migrate to hooks #15678
• Modal [Modal] Migrate to hooks #16254
• Tabs [Tabs] Migrate to hooks #16427
• TouchRipple [TouchRipple] Convert to function component #16522

Lab

• Slider [Slider] Major upgrade #15703
• SpeedDial [SpeedDial] Convert to function component #15737
• SpeedDial Action [SpeedDialAction] Convert to hook #16386

Won't migrate

• RootRef (soon deprecated)

Future work

The following items can be fully addressed once this effort is done:

• Replace withTheme() with useTheme()
• Remove withFormControlContext [core] Use useFormControl instead of withFormControlState  #16503
• Remove withForwardedRef [core] Batch small changes #16532
• When forking refs prefer useForkRef over custom implementations
• Move default props resolution from .defaultProps to function body [core] Remove all .defaultProps usages #16542
• Remove React.Component usage from the demos.

[oliviertassinari]

Once it's done, we should be able to remove the withTheme() and withForwardedRef() higher order components.

[eps1lon]

Once it's done, we should be able to remove the withTheme() and withForwardedRef() higher order components.

withTheme is part of our public API. It's not very convincing to remove withTheme but keep withStyles.

[oliviertassinari]

withTheme is part of our public API. It's not very convincing to remove withTheme but keep withStyles.

To be more specific, we can stop using these higher order components internally. They are still valuable for our users, we should keep the export of the withTheme module. How is this a breaking change?

[eps1lon]

How is this a breaking change?

import { withTheme } from '@material-ui/styles'
- withTheme(); // no error
+ withTheme(); // TypeError

[oliviertassinari]

Oh ok. It's not what I had in mind. He are moving from classes to hooks one pull request at the time, minimizing the changes. We have kept some usage of render props and higher order components. We will be able to replace them :)

[eps1lon]

Alright. So remove internal usage not removing the implementation.

[eps1lon]

@joshwooding If you don't have any priority for specific components it would be nice to prioritize Tooltip (improves RootRef -> useForkRef switch) and other components that use setRef.

[joshwooding]

@joshwooding If you don't have any priority for specific components it would be nice to prioritize Tooltip (improves RootRef -> useForkRef switch) and other components that use setRef.

Luckily I've already done the majority of the Tooltip conversion :)