react hot load doesnt work about react-hooks-global-state HOT 22 CLOSED

I needed to delete this line,

ReactDOM.render(<App />, document.getElementById('app'));

but if I remove it, it just works. Can you confirm the environment? Are you using the patched react-dom?

from react-hooks-global-state.

@vans163 I made a full reproduction. Please give it a try.
hot-load-example.zip

Not quite sure, but this small example seems working without the patched react-dom.
I might misunderstand something.

from react-hooks-global-state.

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

from react-hooks-global-state.

Published: https://www.npmjs.com/package/react-hooks-global-state/v/0.10.0

@vans163 Thanks for your contribution!

from react-hooks-global-state.

gaearon/react-hot-loader#1088
I hope they are working on it.

from react-hooks-global-state.

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 window. instead of to a global var)

import React, { StrictMode } from 'react';
import ReactDOM from 'react-dom';
import {hot} from 'react-hot-loader'

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)}>+4</button>
      <button type="button" onClick={() => update(value - 1)}>-1</button>
    </div>
  );
};

const TextBox = () => {
  const [value, update] = useGlobalState('text');
  return (
    <div>
      <span>Text:{value}</span>
      <input value={value} onChange={event => update(event.target.value)} />
    </div>
  );
};

const App = () => (
  <StrictMode>
    <GlobalStateProvider>
      <h1>Counter</h1>
      <Counter />
      <Counter />
      <h1>TextBox</h1>
      <TextBox />
      <TextBox />
    </GlobalStateProvider>
  </StrictMode>
);

ReactDOM.render(<App />, document.getElementById('app'));
export default hot(module)(App)

I think here

const initialState = {
  counter: 0,
  text: 'hello',
};
const { GlobalStateProvider, useGlobalState } = createGlobalState(initialState);

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

import { createStore } from 'redux'

import rootReducer from './reducers'

const configureStore = () => {
  const store = createStore(rootReducer)

  if (process.env.NODE_ENV !== "production") {
    if (module.hot) {
      module.hot.accept('./reducers', () => {
        store.replaceReducer(rootReducer)
      })
    }
  }

  return store
}

export default configureStore

Need I similar shim here I think, but Iv no idea how to implement it.

from react-hooks-global-state.

Oh, I see your point. Sorry about that.

local component hooks which act as local component state, which does not work regardless.

So, local state doesn't work on hot reload?

from react-hooks-global-state.

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.

from react-hooks-global-state.

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.

from react-hooks-global-state.

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. 🤔

from react-hooks-global-state.

Interesting, I'm only guessing what react-hot-loader is doing, but it keeps hook state (as in useState). This library stores globalState outside of the hook state, and needs to be sync.

from react-hooks-global-state.

@vans163 Can you try if #14 fixes your case?
It's not published in npm yet, you can install from github.

npm install 'dai-shi/react-hooks-global-state#trick-hot-loader'

from react-hooks-global-state.

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);

from react-hooks-global-state.

seems I had same problem. state gets wiped? Not sure maybe I did not purge old packages propely but my package.json says now "react-hooks-global-state": "github:dai-shi/react-hooks-global-state#trick-hot-loader",

from react-hooks-global-state.

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

from react-hooks-global-state.

Hmmm, can you share reproduction code?

from react-hooks-global-state.

import { createGlobalState } from 'react-hooks-global-state';

const { GlobalStateProvider, setGlobalState, useGlobalState } = createGlobalState({
  counter: 0,
  text: 'hello',
});

export { GlobalStateProvider, setGlobalState, useGlobalState };

import React, { StrictMode } from 'react';
import ReactDOM from 'react-dom';
import {hot} from 'react-hot-loader'

import { GlobalStateProvider, useGlobalState } from './state';

const Counter = () => {
  const [value, update] = useGlobalState('counter');
  return (
    <div>
      <span>Count:{value}</span>
      <button type="button" onClick={() => update(value + 1)}>+2</button>
      <button type="button" onClick={() => update(value - 1)}>-1</button>
    </div>
  );
};

const TextBox = () => {
  const [value, update] = useGlobalState('text');
  return (
    <div>
      <span>Text:{value}</span>
      <input value={value} onChange={event => update(event.target.value)} />
    </div>
  );
};

const App = () => (
  <StrictMode>
    <GlobalStateProvider>
      <h1>Counter</h1>
      <Counter />
      <Counter />
      <h1>TextBox</h1>
      <TextBox />
      <TextBox />
    </GlobalStateProvider>
  </StrictMode>
);

ReactDOM.render(<App />, document.getElementById('app'));
export default hot(module)(App)

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.

from react-hooks-global-state.

Here's roughly how I did:

1. npx create-react-app example-app
2. cd example-app
3. npm run eject
4. npm install --save-dev react-hot-loader
5. edit config/webpack.config.js
6. npm install dai-shi/react-hooks-global-state#trick-hot-loader
7. yarn add react-dom@npm:@hot-loader/react-dom

from react-hooks-global-state.

Right I see, but if you dont rerender does hotloader still update the react components?

from react-hooks-global-state.

Do you mean if you edit a file, the component is update in browser? Yes.

from react-hooks-global-state.

Your example works. I see, you seperate index.js and App.js.

from react-hooks-global-state.

seperate index.js and App.js

Does this fix your example too?

If you are ok with this, I'll publish a new version.

from react-hooks-global-state.