Why React Hook useState uses const and not let

The standard way to use a React useState Hook is the following:

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

However this const count variable is clearly going to be reassigned to a different primitive value.

Why then is the variable not defined as let count?

> clearly going to be reassigned to a different primitive value

Not really. When the component is rerendered, the function is executed again, creating a new scope, creating a new count variable, which has nothing to do with the previous variable.

Example:

let _state;
let _initialized = false;
function useState(initialValue) {
  if (!_initialized) {
    _state = initialValue;
    _initialized = true;
  }
  return [_state, v => _state = v];
}

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

  console.log(count);
  setCount(count + 1);
}

Component();
Component(); // in reality `setCount` somehow triggers a rerender, calling Component again
Component(); // another rerender

Note: Hooks are way more sophisticated and are not actually implemented like this. This is just to demonstrate a similar behavior.

const is a guard against reassigning the value of the reference within the same scope.

From MDN >It does not mean the value it holds is immutable, just that the variable identifier cannot be reassigned.

Also >A constant cannot share its name with a function or a variable in the same scope.

> After calling setCount the component is rerendered and the new call of > useState returns the new value. The point is that count is immutable. > So there's no typo here.

Technically it is a new variable at every render.

Source: React Github issue: Docs - Hooks: is that const a typo ?

here I found that const was frustrating since count needs to change so

  let [count, setCount] = useState(0)
  // simply can't use ++ on either side of count increment given we declare as const [count, setCount] 
  // instead declaration of var or let [count, setCount] allows simpler code
  const increment = () => {
    setCount(count++); //const cannot do this only let or var
  };

It's not exactly assigning a new value. useState is simply a state updating function. Const is used here because the change of value is being managed somewhere else by React. You're telling React to manage some value for you by calling useState.