How does React State Hook gets the state variable name from the ES6 Destructuring Assignment

Question

In React State Hooks , one can write the following line to set a state variable called count and the setCount function to set the value afterwards, like below:

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

Which is going to be the equivalent of writing:

this.state = { count: 0 };

My question is, how does the useState() function can get the name of the state variable -- count in this case, from the ES6 Destructuring Assignment statement?

Isn't the destructuing happens after the function has returned its value? Or is it possible to dynamically get the values that are being destructed, inside the function when it is invoked?

Update

Please note that I do understand that I can deconstruct to any name that I want, but how does the useState() knows what variable should go in the state , so it can be used later.

For example if I set two state variables, how does it distinguish between the two values, if the useState() function is not aware of the variable names?

const [age, setAge] = useState(42);
const [fruit, setFruit] = useState('banana');

Answer 1

useState returns an array, where first element is the value and second is the setter and using de-structuring you can give any name to it

For instance the above code is equivalent to

const state = useState(0);
const count = state[0];
const setCount = state[1];

Answer 2

It's returning an array that you destruct. The first index of the array is the value, the second the function. With array destructuring you can set a name for those variables

Example:

const [one, two] = ["test", () => {console.log(1)}];
console.log(one) // would be test
two() // would print out 1

More here: https://medium.freecodecamp.org/array-destructuring-in-es6-30e398f21d10

Answer 3

When you use functional-components and useState

const [myCountVariable, setCount] = useState(0);

You only access your data using the myCountVariable variable. this.state isn't used.

If I understand correctly what you didn't understand is how it knows to write into 'this.state.myCountVariable' - it doesn't. The state doesn't store with the actual variable name.

Like the posts above me said, the useState assumes each time the component calls it it will call it in the same order so it returns "variable holders" based on index.

In React docs you can see they reference this in React Hook Rules:

Only Call Hooks at the Top Level Don't call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function. By following this rule, you ensure that Hooks are called in the same order each time a component renders. That's what allows React to correctly preserve the state of Hooks between multiple useState and useEffect calls. (If you're curious, we'll explain this in depth below.)

Basically,

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

is more accurately represented as

componentStateContainer[currentStateIndex] = myStateVariable; //React doesn't know how you named your local variable
currentStateIndex++;
return [myStateVariable, setStateMethod]

(currentStateIndex will reset to 0 when the function component is re-created)

Answer 4

Destructuring of arrays in JS is done by index, not by property name. Only the destructuring of objects is by property name.