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.

[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 :)

[gautam-pahuja]

Hi, @oliviertassinari I would like to try this for "Portal" component. Can I work on that if no one else has done it already? 😃

[oliviertassinari]

Unless @joshwooding has already done an effort in this direction, you are good to go :).

[joshwooding]

@gautam-relayr Feel free :)

[adeelibr]

Can I work on the InputBase & Snackbar component? @oliviertassinari @joshwooding

[oliviertassinari]

@adeelibr Good for me :). For the Snackbar, I think that we should apply the same fix we applied to the Modal and Popper first. By the way, we still have a couple of demos using the class function, we need to migrate them too to the function component API :).

[adeelibr]

For the Snackbar, I think that we should apply the same fix we applied to the Modal and Popper first.

Understood I'll have a look at the relevant PR's to understand what needs to be implemented for the Snackbar.

By the way, we still have a couple of demos using the class function, we need to migrate them too to the function component API :).

I must have missed them 😅 I'll have a look at it 👍

[austingardner]

Is the makeStyles API stable or is it subject to change? We currently use withStyles on an internal app here at WalmartLabs but we are eager to start using more hooks APIs.

[oliviertassinari]

@austingardner I have looked into it in #15023. I haven't seen any issue (aside from the default props + API generation). We haven't moved forward as it's not a priority for the project right now. I only wanted to evaluate the potential. It should be ✅. I hope we can automate the conversion post v4. Maybe with a codemod?

@eps1lon has found an issue in StrictMode. The style sheets might not be removed from the DOM. Given withStyles uses makeStyles internally, everybody is impacted. So it shouldn't be a concern when choosing between withStyles and makeStyles.

By the way, we have added WalmartLabs logo in https://next.material-ui.com/. Let us know if it's OK for your team :).

[oliviertassinari]

@austingardner To answer your question. No, we don't plan on changing the API of makeStyles.

[austingardner]

@oliviertassinari Thanks for the response! We'll start using it then.

[joshwooding]

Can I work on the InputBase & Snackbar component? @oliviertassinari @joshwooding

@adeelibr I'd prefer if people pick up one component at a time, but feel free to help. :)

[jacobbogers]

ok, I analyzed your source code and use of npm module css-mediaquery used for SSR and mocha tests
I know now how to create the unit tests,

[oliviertassinari]

I'm taking care of the Slider.

[jacobbogers]

Some issues,
I am implementing this in a fork from master or should i have used next branch???

I put the hooks and contextProvider (for width) in the package material-ui-styles

running tests now, i get the following errors
Missing modules

• expect.js
• zen-observable
• detect-browser

After installing all these modules with npm , (in the project root)

I run npm run test in directory /packages/material-ui-styles
i get the error

C:\Users\jacob\repos\ui\material-ui\packages\material-ui-styles\node_modules\jss-vendor-prefixer\lib\index.test.js:34
var isIE9 = _detectBrowser2['default'].name === 'ie' && _detectBrowser2['default'].version === '9.0.0';
                                       ^

TypeError: Cannot read property 'name' of undefined

[joshwooding]

@jacobbogers next should be used.

You need to use yarn to install the dependencies. We recently updated our documentation, but it looks like the note was only added in the docs/README.md. Sorry for the inconvenience.

[jacobbogers]

Thanks, yes, I remember I came accorss this when I installed material-ui for the first time, sorry to have forgotten.

[jacobbogers]

Can someone check out my PR so far?
Havent updated the docs yet, just wanted some feedback first #15678

[jeongsd]

Hi, Can I work on the ButtonBase component?

[joshwooding]

@jeongsd ButtonBase is going to be one of the hardest components to migrate. I would start looking at SpeedDialAction instead

[adeelibr]

Hi, Can I work on SwipeableDrawer?

[oliviertassinari]

@adeelibr A previous effort started in #15469 (comment).

[adeelibr]

Is SpeedDial Action available to work on? 😄 @oliviertassinari

[jeongsd]

Thanks for the guide @joshwooding, can I work on SpeedDial?

[bpas247]

Remove React.Component usage from the demos.

Is this task still up for grabs? I wouldn't mind taking it, if it's open 😃

[oliviertassinari]

Unless @joshwooding has something in store for it. It's up for grab :).

[joshwooding]

@bpas247 No plans here :) Feel free!

[bpas247]

Hmm looking at the doc examples right now, it looks like most of the component examples have already migrated to function components.

Are there any that haven’t? Or am I looking in the wrong directory for what the task is relevant to?

[oliviertassinari]

This is one way to find them: https://github.com/mui-org/material-ui/search?l=JavaScript&p=1&q=%22React.Component%22.