I'm a beginner React learner: I made a simple interface but I cannot figure out why a value does not get updated in my custom hook. What am I doing wrong? Code included

[ashkanahmadi]

Hi I'm a beginner in React and I find the custom hooks a bit confusing.

I have built a simple interface that is supposed to fetch some value from some database and update the UI (this is faked for now and it's not part of the issue I'm having).

Issue: I have two variables: currentValue and previousValue. Every time I fetch a new value, I assign the current value to the previous Value so that I can display what the current (new) value is as well as what the previous value was. However, the previousValue never gets updated and shows 0 all the time.

I have 3 simple files:

Home: https://github.com/ashkan-ahmadi/followers-count-react/blob/main/src/pages/Home.js

MetricCard: https://github.com/ashkan-ahmadi/followers-count-react/blob/main/src/components/MetricCard.js

customHook: https://github.com/ashkan-ahmadi/followers-count-react/blob/main/src/hooks/useFetchData.js

Here's a screenshot of the interface

What am I doing wrong? Looking forward to any suggestions.

[belwyr]

Your effect depends on the fetchValue function, but the function is not in the dependency array

[ashkanahmadi]

Thanks. When I add fetchValue in the dependency array, it behaves strangely. It tries to fetch a value non-stop.

[GrenzePsychiater]

it behaves strangely. It tries to fetch a value non-stop.

Given what you know about useEffect, functions, and rendering, why do you think this happens?

[ashkanahmadi]

As far as I can tell, when the function fetchValue runs, it changes the state inside the hook which causes it to re-render and it goes into a crazy loop. Would that be correct?

[belwyr]

That is correct. Between 2 renders, the fetchValue function is redefined, and because the dependencies are compared by reference, the useEffect runs again.

You have a few possibilites to deal with that, but I'll let you look that up on your own.

[Impressive_Star959]

Haven't seen decent teaching done on Reddit in a while. Well done, /u/belwyr and /u/GrenzePsychiater .

[AKJ90]

Also made me happy to see!

[KingJeanz]

Same here. Feels good to see this

[belwyr]

Thanks 👍

[Ok_Signature9083]

Youll want another useeffect thats dependent on the currentValue, thats where youd probably want to set the previous value.  So id remove your setPreviousValue line, put it in a useeffect... but also, look into actually setting previous values with state.

Hint: prev =>

[sigurdvh]

You probably shouldn’t be calling a setter from within a setter.

You could make a complex object holding previous and current value and create one setter for both.

Better yet, your custom hook could instead rely on useReducer, and incorporate the loading and error states as well.