Почему React Hook useState использует const, а не let

Стандартный способ использования React useState Hook заключается в следующем:

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

Однако эта const countпеременная явно будет переназначена на другое примитивное значение.

Почему тогда переменная не определена как let count?

явно будет переназначен на другое примитивное значение

На самом деле, нет. Когда компонент перерисовывается, функция выполняется снова, создавая новую область видимости, создавая новую countпеременную, которая не имеет ничего общего с предыдущей переменной.

Пример:

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

Примечание: хуки намного сложнее и на самом деле не реализованы так. Это просто для демонстрации похожего поведения.

const является защитой от переназначения значения ссылки в той же области видимости.

От MDN

Это не означает, что значение, которое оно содержит, является неизменным, просто то, что идентификатор переменной не может быть переназначен.

Также

Константа не может делиться своим именем с функцией или переменной в той же области видимости.

После вызова setCount компонент перерисовывается, и новый вызов useState возвращает новое значение. Дело в том, что количество является неизменным. Так что здесь нет опечатки.

Технически это новая переменная при каждом рендере.

Источник: React Github: Docs - Hooks: это опечатка?

здесь я обнаружил, что const расстраивает, так как count нужно изменить так

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