nico
Published in : 2022-02-18
I have one app which add data with a POST http request.
I want to useEffect to reload the data which dispatch a GET http request with onGetData. the problem is it is called all the time.
It seems to be because the dependencies of useEffect is one array of one object reference.
And this object reference is changed each time we map from the redux state to the component props (in mapStateToProps).
What can I do to either avoid useEffect called all the time? or Can I add another check instruction before calling onGetData.
Thanks for your help :)
useEffect(() => OnGetData('/MyData/Load')), [myData]); function mapStateToProps(state) { return { myData: state.myData };}Join our community and get the chance to solve your code issues & share your opinion with us
Sign up Now
Mohamed Atef Date : 2022-02-18
Best answers
51
Best answers
51
From what I see that you want to call it one time only?
It's already being called one time when the component finishes loading, If it is repeated we can use a condition like If the data exists don't update it
nico Date : 2022-02-18
Best answers
4
Best answers
4
I found a react hook called use-deep-compare-effect on npm which tackles with this very same problem I raised !
//github.com/kentcdodds/use-deep-compare-effect
I will try it and paste the code when I'm done.
Cheers
nico Date : 2022-02-18
Best answers
4
Best answers
4
Dear Mohamed,
I just needed useEffect to be called when myData object is updated (for example when I add or update data on the myData object).
So useEffect should be called only when we called the http post to add/update and got the new data.
I found a hook which looks promising : //github.com/kentcdodds/use-deep-compare-effect
nico Date : 2022-02-18
Best answers
4
Best answers
4
It seems to work like expected.
I also found but didn't try:
//github.com/sanjagh/use-custom-compare-effect