0

I have an app that involves lots of calculations and quite a few variables. My understanding is that when you update State, there is a lag before the state variable gets updated. Consequently, it seems that you might end up with incorrect calculations in your formulas if you use State. Or at least it seems that way to me with my limited understanding.

So, I have been using a mixture of State and just basic variables. But I have a really unclear understanding of when I should be using State verses when I should be using just a basic (or global) variable in my app.

Is my understanding above incorrect? Does someone have an answer to this conundrum?

Jon
  • 501
  • 3
  • 18
  • 2
    ```useState``` maintain value through re-renders, also changing its value cause component to re-render. variables, when previous don't matter, also variables, re-initialized on every component rendering. – Medi Aug 03 '21 at 13:55
  • 1
    Does this answer your question? [React Hooks - using useState vs just variables](https://stackoverflow.com/questions/58252454/react-hooks-using-usestate-vs-just-variables) – Emile Bergeron Aug 03 '21 at 13:58

1 Answers1

2

The only reason or purpose for state is that you expect your UI will depends on the value of the state, and that value will change over time.

Says for example you have a UI that has counter and two buttons + & -, now counter is of type Number and it can be of either variable or a state. To know the right choice, ask yourself below two questions,

  • do you expect the value of counter to change over time?
  • is your UI has anything to do with this counter? such as if counter hits certain threshold and you wanna hide something? or simply wanted to show counter on the UI itself?

If your answer is yes to the above questions, then you need state

Isaac
  • 12,042
  • 16
  • 52
  • 116
  • If I am using useState, I understand that it is asynchronous. So can you actually trust the value of that state variable in a calculation because it might not contain the updated state yet? – Jon Aug 03 '21 at 15:30
  • Let me take an example. I have navigation buttons to move through a game. Forwards, backwards etc. The non-state variable I have been using is plyViewed. So if someone clicks the back button, I have plyViewed--. Then plyViewed is used in other calculations. But if I use a state variable instead and click that button, plyViewed might get used in the calculations but it is still its original value, because the -- has yet to be updated. Hope that makes sense. – Jon Aug 03 '21 at 15:30
  • My game data is in an object gameDetails. It has about 20 variables. Would you suggest I move all those variables into a state object instead? Or do I need to have two lots of gameDetails, one for those elements that result in the UI updating, and those for non-UI elements? I was trying to keep it all in the one gameDetails object for simplicity. Also, I am wondering if any calculation in your code ultimately has an impact on the UI, because if it doesn't, why do you have that code in the first place? – Jon Aug 03 '21 at 15:32
  • 1
    @Jon You should include a [mcve] (inside your question description) that demonstrates what is confusing you. You're likely misusing state, which is a [really common issue](https://stackoverflow.com/q/54069253/1218980) when starting a project with React. – Emile Bergeron Aug 03 '21 at 16:15