[withWidth] Remove the API

[Bouncue]

The docs says:

withWidth()

This higher-order component will be deprecated for the useMediaQuery hook.

Will this really happen? when and in what version?

I have many class components which mean cannot use useMediaQuery hook. But I really need to keep watch on screen size changes.

Also if Material-UI decides to get rid of withWidth() then why still use it in the demo? as in Responsive Drawer

This makes me confuse unsure to decide, should I just use withWidth() in my class components or should I convert them into functional component -which means a lot of work- to use useMediaQuery.

Does Material-UI plans to drop support for the class component?

[oliviertassinari]

@Bouncue You can find more detail on this topic under #14101. To sum up the discussion, the most likely path forward is to remove withWidth() and to introduce a withMediaQuery() API.

Does Material-UI plans to drop support for the class component?

We will support class components as long as React do so. Note that moving a hook to a higher-order component is relatively straightforward:

import useMediaQuery from '@material-ui/core/useMediaQuery';

const withMediaQuery = (...args) => Component => props => {
  const mediaQuery = useMediaQuery(...args);
  return <Component mediaQuery={mediaQuery} {...props} />;
}

export default withMediaQuery;

Does it help?

Also if Material-UI decides to get rid of withWidth() then why still use it in the demo? as in Responsive Drawer

I can't find any demo on the drawer page that uses this API. Where did you spot it? We should remove it.

[Bouncue]

Thanks I'll try it.

I can't find any demo on the drawer page that uses this API. Where did you spot it? We should remove it.

In Responsive Drawer, the Hidden component is used:

import Hidden from '@material-ui/core/Hidden';

As far as I understand the component uses withWidth() where the docs says:

responsively hiding content based on using the withWidth() higher-order component that watches screen size.

[oliviertassinari]

@Bouncue Thanks for highlighting this issue, the Hidden component is no longer using withWidth, it was migrated to useMediaQuery some time ago. We will need to solve this inconsistency.

[tlenex]

I have a question for this. As far as I understand, built-in react hooks are not meant to be used with class components. Will useMediaQuery be usable in class components? What will be the alternative if not?

[oliviertassinari]

@tlenex If there is enough request, we can make either:

• withMediaQuery high-order component

const withMediaQuery("(prefers-color-scheme: dark)")(MyComponent);

• or a render prop MediaQuery component

<MediaQuery query="(prefers-color-scheme: dark)">
  {(matches) => matches}
</MediaQuery>

[tlenex]

Thank you. I'd like to vote for support of both react component formats. Pretty please!

Personally, I like to use class components for business logic (controllers/containers) and functional components for visualizations. My point is that sometimes business logic can depend on media queries - in that case material-ui will force me to rewrite classes to functions. More over, react team does not plan to deprecate class components as far as I know.

[NMinhNguyen]

in that case material-ui will force me to rewrite classes to functions.

This is just my opinion, but you wouldn't need to rewrite class components to function components - you could just define a function component wrapper that uses the useMediaQuery hook and passes props to your class component as shown in #17350 (comment)

[eps1lon]

What are some use cases for knowing the current breakpoint other than our internal usage in Hidden?

[oliviertassinari]

@eps1lon I believe we will need an internal useBreakpoint() hook (returning the current breakpoint) in order to implement: useBreakpointValue (#23885).