What is the scope of useState hook?

help
1

I did read about Meteor/React hooks in todolist manual, and in w3schools manual. I cannot find information about what is the scope of such hook - when does the instance become into existence and when it disappears. Testing shows that two different forms on screen can both use their own hook for a variable - is one instance for a function called only once, initializing a hook, and then - what keeps this hook together, when the instance variables have been changed and what is the mechanics, which makes those functions so class-like that w3schools manual says classes are more or less unnecessary with those hooks? When I can be sure a hook is holding my value, is this one instance of the xml Tag, which makes up the component the hook is for, and then - what is the programmatic mechanism/guarantee, that this hook is connected with this instance of the xml tag? For me it was hard to find answers to these questions in the manuals.

2

For starters, I find w3schools lacking when it comes to learning react and would advise that you read the official react documentation here.
In regard to your question, consider the following example:

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

the line const [count, setCount] = useState(0); declares a new variable in the state called count, every time it changes, the react component redraws (re-renders) itself.

More specifically, when useState is called with a value, in this case, 0. A new variable in the state is created. The variable is initialized with the number 0, and will continue to “live” in the state until the component is not rendered anymore, i.e. destroyed. that means that if you stop rendering the component, as part of a dynamic logic, react will free up the component from memory, including the count variable because it is stored in the component state.
While the component is rendered, the variable is accessible. and holds the initial value or the value set to it by the setCount function, which you receive as the second parameter when you call useState.

Hope this helps!