Closed otaviobonder-deel closed 5 years ago
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.
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
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?
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.
@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.)
Closing this for inactivity. Feel free to reopen it.
I followed some examples and tried to implement the global state. On any first page load, I want to call my back end and get some data. So in my App.js file I used
useEffect
to call a function to update the state:I debugged and I know that everything works right and the state is updated. However, on the page load, instead of accessing the updated state, I get my initial state.
Here is my Container that should receive the updated state, however receives the initial state:
What can be wrong?
Thanks!