Why React Hook useState uses const and not let

Question

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?

Answer 1

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.

Answer 2

const 防止在同一范围内重新分配引用的值。

来自MDN

这并不意味着它持有的值是不可变的，只是变量标识符不能重新分配。

还

常量不能与同一作用域内的函数或变量共享其名称。