If you are new to the concept of array destructuring in JavaScript, check out my blog post here.

Below, we have a function named welcome.

const welcome = () => {
  return `Welcome!`
}

We have another function named user that returns an array with two elements: the first element is the user id and the second element is the welcome function that we defined above.

const user = () => {
  return [1, welcome]
}

Now, let's call the user function and save the returned result in a variable named data.

const data = user()

console.log(data)
// [1, welcome]

Can we destructure the data variable?

The answer is: yes, we can.

const [id, greeting] = user()

console.log(id)
// 1

console.log(greeting())
// Welcome!

In React, when you use the useState hook, you would come across the array destructuring concept that we discussed above.

The useState hook returns an array with two elements: the current state and a function to update the state. In the example below, we use array destructuring to hold the state in a variable named count and the function to update the state in a variable named setCounter.

const Counter = () => {
  const [count, setCount] = useState(0)

  return <p>The initial count is {count}.</p>
}