media query changes in file require a full browser refresh when using react-hot-loader
CallidusAsinus opened this issue · comments
When I make a change such as <Media query="(min-width: 1120px)"> to <Media query="(min-width: 900px)">, I need to refresh my browser in order for the change to take effect.
react version: 16.2.0
react-hot-loader version: 4.0.1
react-media version: 1.8.0
webpack-dev-server version: 3.1.1
Just did some testing, and it looks like componentWillMount
Line 32 in 678f78c
React-Hot-Loader maintainer here.
That is expected behaviour. Component is mounted, and RHL is not changing that.
The only way to handle it - change this library to handle props change.
I guess it would be good to take prop changes of query into account.
I don't know whether it's a good idea, but I guess dynamically updating a media query wouldn't work right now.
@CallidusAsinus I'm most probably missing something here, as I tried reproducing the bug, but couldn't manage.
I've quickly setup hot reloading in an ejected create-react-app-app, and tried to mirror your package versions. Only thing I couldn't manage was to get CRA working with webpack-dev-server@3, it comes with version 2.x.
I've published the setup here: https://github.com/edorivai/react-media-hotloader
@theKashey any idea why this is working for me? 😅
@edorivai - modules.hot and react-hot-loader are a bit different.
In your case you are hot reloading your application, remounting all the components
With RHL - you will hot update existing components.
The only way to fix this - handle query prop change in componentDidUpdate()
Hmmmm, I used the "Migrating from create-react-app" recipe as outlined in the react-hot-loader docs. And the end result seems very similar to the "Getting started" flow.
With RHL - you will hot update existing components.
How do I get this ☝️ ? 😅
@CallidusAsinus If this is still an issue for you, I would really appreciate a reproduction repo to take a look at. You could even fork and edit my failed attempt at reproducing this.
With RHL - you will hot update existing components.
(🐢 mode), as long as idea around Hot Loader is to change your code without changing your state - that is what you will get using React-Hot-Loader. But it could be tricky to setup it with CRA.
I'm going to close this for now. If this issue is still important for someone, then please ping me in this issue, and add a codesandbox reproduction case to your reopen request.