What Problem Does useState solve that variables don't?

Okay I am starting this new program alongside my work to deepen my React knowledge. The outcomes of this session are a blog post (this), reading some docs, and of course a Miro diagram (As always). 

"Components often need to change what's on the screen as the result of an interaction." 

"Components need to 'remember' things: the current input value, the current image, the current cart."

"In React, this kind of component specific memory is called state." (from the Docs). "Local variables don't persist between renders." 

"When React renders this component a second time it renders it from scratch." 

"Every time React re-renders the component, it runs the function again from the top" 

"A state value - this stores the value and remembers it between renders." Why not just use a local value? 

"React only updates the screen when it knows something important has changed."

Continuing with the Docs

And actual main ones 

"useState is a React Hook that lets you add a state variable to your component." Right, I went off on one and read the "state variable" docs. So lets keep on going from here with the useState docs. 

"call useState at the TOP of your component to declare a state variable (yep yep)". this is called using ARRAY DESTRUCTURING. (This is a part of destructuring assignment, this has never come naturally to me (along with objects)). 

THE first parameter is the inital state (yep yep yep) 

it can be a value of any type but it will be ignored after the initial render (???!) you can pass in a function but it can't have any arguments

"use state returns an array with two values: the initial state and the state setter funciton". YOU CAN ONLY USE HOOKS AT THE TOP LEVEL OF YOUR COMPONENT. YOU CAN'T USE IT INSIDE OF LOOPS OR CONDITIONALS 

SETTER FUNCTION

- THE SET FUNCTION RETURNED BY USE STATE LETS YOU 

• UPDATE THE STATE TO A DIFFERENT VALUE 
• TRIGGER A RE-RENDER 

- you can pass in the new state directly

or trigger it from previous state = old state + 1 = new state (vibes).

Actual Writing Task

Okay I got tired. But I think I got enough now. I have taken in enough new input. So now let me do my writing task and create a diagram 

So. "What Problem Does useState solve that variables don't?"

***

React is all about Reacting to changes of state (???) and updating things in the Dom.

It re-renders things when things change. Now the problem is that every time a component re-renders all of the code runs again from the top of the function.

That way, any changes of state will not be remembered if they are just re-assigned using variables.

BUT STATE IS THE MEMORY THE COMPONENT HAS EVEN WHEN IT CHANGES. SO even though the component's job is to change and to re-run every time something in the DOM changes (??) STATE VARIABLES ARE A WAY THAT THAT COMPONENT REMEMBERS THE STATE THAT SOMETHING WAS IN EVEN WHEN A COMPONENT RE-RENDERS.

Let's say I am keeping track of apples. There are 10 apples. As the state goes up to 11, this will cause the component to re-render and all of the code in the component will run from the top again.

If apples=10 is just stored in a regular variable then apples will go back to 10. However if we use usestate to intially set the apples to 10 and then use the setter function to update the apples to 11 then THAT STATE OF HAVING 11 APPLES WILL BE THE SAME

EVEN AFTER THE COMPONENT RE-RENDERS 

So therefore we need use state to store our data so that it can be remembered even when the component re-renders. This way we can keep it even when our component changes. 

So we can go through complex changes and iterations but keep our data correct 

I know i should be using code examples here. It's just two different tasks for me - code and writing. I can see it all in my head