-
Notifications
You must be signed in to change notification settings - Fork 62
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
react hot load doesnt work #13
Comments
gaearon/react-hot-loader#1088 |
Thats unrelated AFAIK, that's for compile errors (that got fixed) + local component hooks which act as local component state, which does not work regardless. Global hooks via react-hooks-global-state work more like Redux here, and need a shim for the Hot Loader I would assume. (So state gets carried over after hotload, perhaps using some as simple as writing to
I think here
on a hotload this gets called again. This should only be called once per init of the full page? Any help to test this theory would be appreciated. Here is how hotload works for Redux
Need I similar shim here I think, but Iv no idea how to implement it. |
Oh, I see your point. Sorry about that.
So, local state doesn't work on hot reload? |
Ahh so I am a little new to ES6, but I put the state into its own module (same like example 11 deep does it, example 1 I was using is incorect), and it seems to work as long as I do not hotload the state.js file itself. Which is good enough I guess. |
Actually this works "good enough" but if you have more complex state.js, such as with reducers or import reducers, itl wipe the state clean each hotload, so maybe a better fix needed, leaving it open. |
So, I reproduced the issue locally. What I experienced is that it doesn't reset the count, but the button no longer works. I need to dig into it. 🤔 |
Interesting, I'm only guessing what react-hot-loader is doing, but it keeps hook state (as in useState). This library stores |
Here's the code I tried: import React from 'react';
import { hot } from 'react-hot-loader/root';
import { createGlobalState } from 'react-hooks-global-state';
const initialState = {
counter: 0,
text: 'hello',
};
const { GlobalStateProvider, useGlobalState } = createGlobalState(initialState);
const Counter = () => {
const [value, update] = useGlobalState('counter');
return (
<div>
<span>Count:{value}</span>
<button type="button" onClick={() => update(value + 1)}>+1</button>
<button type="button" onClick={() => update(c => c + 1)}>+1</button>
</div>
);
};
const App = () => {
const [count, setCount] = React.useState(0);
return (
<GlobalStateProvider>
<div>
<h1>Hot Load Example</h1>
<h3>Local</h3>
<span>count:{count}</span>
<button onClick={() => setCount(count + 1)}>+1</button>
<button onClick={() => setCount(c => c + 1)}>+1</button>
<h3>Global</h3>
<Counter />
</div>
</GlobalStateProvider>
);
};
export default hot(App); |
seems I had same problem. state gets wiped? Not sure maybe I did not purge old packages propely but my package.json says now |
This patch made things even worse actually. Now when I keep state in a seperate module, it wipes the state clean if I hotload any part of the app. Before this patch, it would wipe the state clean only when I would hotload state.js |
Hmmm, can you share reproduction code? |
With master, if you change this page, edit for example +2 to +3, state is presevered. With your latest branch, if you edit +2 to +3, state gets wiped. |
I needed to delete this line,
but if I remove it, it just works. Can you confirm the environment? Are you using the patched react-dom? |
Here's roughly how I did:
|
Right I see, but if you dont rerender does hotloader still update the react components? |
Do you mean if you edit a file, the component is update in browser? Yes. |
@vans163 I made a full reproduction. Please give it a try. Not quite sure, but this small example seems working without the patched react-dom. |
Your example works. I see, you seperate index.js and App.js. |
Does this fix your example too? If you are ok with this, I'll publish a new version. |
This fixes it if I do exactly as your example. And put render inoto index.js not App.js, which is the correct way to do it anyways. yes can merge |
Published: https://www.npmjs.com/package/react-hooks-global-state/v/0.10.0 @vans163 Thanks for your contribution! |
Using react hotloader
Does not work, is there a way to get it to work without having the state reset every time a hotoad happens?
The text was updated successfully, but these errors were encountered: