Can't get updated state about react-hooks-global-state HOT 6 CLOSED

It is because updatesRates is called before GlobalStateProvider is initialized.
Can you move useEffect in components under GlobalStateProvider?

I'm not sure how we can resolve this in general. Basically the use of setGlobalState is not recommended in this case and I'd use const setRates = useGlobalState('rates')[1].

(edit) There was my misunderstanding at first. There is no issue with initialization. The use of setGlobalState is fine and is better for performance in certain cases. You could even call it outside of GlobalStateProvider, but I wouldn't recommend it.

from react-hooks-global-state.

I tried moving it to the Routes component. It runs fine, however the same problem happens.

I didn't understand what you meant with const setRates = useGlobalState('rates')[1]

I tried to follow the fetch and onmount examples, but it didn't work

from react-hooks-global-state.

I tried moving it to the Routes component. It runs fine, however the same problem happens.

Sorry. There might be something I misunderstand.
Could you provide a codesandbox to reproduce the problem please?

https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/master/examples/05_onmount
This example without modification is working for you, correct?

from react-hooks-global-state.

Could you provide a codesandbox to reproduce the problem please?

Yes: https://codesandbox.io/s/82kyyqw98j I just hard coded the setRates, because I won't integrate my API in codesandbox. But it replicates the issue.

This example without modification is working for you, correct?

I didn't try it, however I based my implementation using this one.

from react-hooks-global-state.

@otaviobps Thanks for the code.

It's nothing to do with initialization which I mentioned in the first comment.

It's simply the usage of setGlobalState. The correct one is the following:

export const setRates = obj => {
  setGlobalState('loading', false);
  setGlobalState('rates', obj);
};

I didn't understand what you meant with const setRates = useGlobalState('rates')[1]

This is what I mean.

const Routes = () => {
  const setRates = useGlobalState('rates')[1];
  const setLoading = useGlobalState('loading')[1];
  useEffect(() => {
    setRates(2);
    setLoading(false);
  }, []);

  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={Main} />
        <Route path="*" component={() => <h1>Page not found</h1>} />
      </Switch>
    </BrowserRouter>
  );
};

But, this will trigger re-render if rates or loading in state is changed.
So, setGlobalState would be better for performance. (My recommendation in the first comment is wrong.)

from react-hooks-global-state.

Closing this for inactivity. Feel free to reopen it.

from react-hooks-global-state.