-
-
Notifications
You must be signed in to change notification settings - Fork 32.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Is withWidth HOC will support class component once useMediaQuery released #14101
Comments
@oliviertassinari @joshwooding what is your opinion on this. |
You can create a high order component out of a functional component that uses the useMediaQuery hook. @oliviertassinari maybe we should provide a wrapper in the library |
We had the same feedback from @anthotsang in #14054. I do agree that we should keep a higher-order component API. But should we keep the |
Or maybe even a render prop API :) |
Just want to note that if we deprecate anything over a hook we deprecate |
Hi folks, function SomeComponent() {
const classes = useStyles();
const theme = useTheme( );
const width = useWidth(theme); // this nice utility function is missing; should return a string from the `theme.breakpoints.keys` aka 'xs',
return ....
} |
Ok, I'm proposing the following plan of action:
@jacobbogers What do you think? Do you want to submit a pull request for it? 😄 |
Sure olivier, I will make PR, let me read your about process |
Guys, I have this use case
What do you all think of this solution? |
@jacobbogers What's the win? aside from the extra ceremony required? |
@oliviertassinari , my reasoning was motivated by the fact that react itself doesnt use a seperate event handler when you register a function with the "onClick" attribute, there is one event loop. so I was thinking along those same lines that one single event handler listening for media matches and pass it on to components who need it. This would only be uselfull especially if you have many compents needing "width" awareness. Maybe an edge usecase, i had to build a website where a lot of components needed to be aware of the screensize, so thats why i mentioned it. ofc both can be done, have a hook AND a context provider |
@jacobbogers I hope that React can batch the updates in an efficient way. But I have never tried it. I couldn't tell. |
I will make a test, in any case I am working on the hook. |
Ok, I have written a |
Yeah i better wrap this up, lol) |
I understand why a |
@eps1lon, So it was more of a performance enhancer, for a single component who needs to know width just use the |
@jacobbogers Did you benchmark the performance difference? Without information, I believe we can ignore it and focus on DX until it's proven to be slow. |
Kindly create a breakpoint or useMediaQuery functionality for Class Components as well without using higher order component or render props. |
@naman13924 Where have you seen this commitment? So far I have seen that they don't plan to touch it for many months. But does it mean forever? |
@oliviertassinari from the React docs page on hooks: https://reactjs.org/docs/hooks-intro.html |
@Magneticmagnum Definitely, they won't kill it before years, especially if it doesn't cost them much to keep the class API and that a few features don't have equivalences. However, if at some point, 90%of the codebase are on hooks, I'm confident they will. But again, I doubt it will happen before years, if it ever happens. As long as we can support custom breakpoints, we should be good. |
The reason for adding the hook would be the same reason Material-UI added the |
As per the meterial-ui document https://material-ui.com/layout/breakpoints/ under the section of JavaScript Media Queries,
if withWidth HOC deprecated, then how can we acheive the same feature in class component.
The text was updated successfully, but these errors were encountered: