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');

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');

• javascript
• reactjs
• ecmascript-6
• destructuring

Share Improve this question Follow edited Apr 12, 2019 at 10:26 Mahdi asked Apr 12, 2019 at 10:17 MahdiMahdi 9,42799 gold badges5757 silver badges7575 bronze badges 2

• 3 You can read this blog post to get an understanding of how hooks work under the hood – Tholle Commented Apr 12, 2019 at 10:31
• 1 @Tholle I think that's what I was exactly looking for! – Mahdi Commented Apr 12, 2019 at 10:33

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

When you use functional-ponents 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 ponent 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 ponent 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

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

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

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/array-destructuring-in-es6-30e398f21d10

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];

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

As shared before on past answers you can see how the return is named by the array destructuring:

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

At the useState hook you are naming the function return:

function customFunction(){
   let var
   
   function setVar(value) {
      var = value
   }
   return [ var, (value) => setVar(value) ]
}

Using the array destructuring you are able to define a custom name for each array element by position.

const [ myCustomVar, setCustomVar ] = customFunction()