Dlaczego React Hook useState używa const, a nie let

Standardowy sposób korzystania z React useState Hook jest następujący:

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

Jednak ta const countzmienna zostanie wyraźnie przypisana do innej pierwotnej wartości.

Dlaczego zatem zmienna nie jest zdefiniowana jako let count?

wyraźnie zostanie przypisany do innej pierwotnej wartości

Nie całkiem. Gdy komponent jest ponownie generowany, funkcja jest wykonywana ponownie, tworząc nowy zakres, tworząc nową countzmienną, która nie ma nic wspólnego z poprzednią zmienną.

Przykład:

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

Uwaga: Haczyki są o wiele bardziej wyrafinowane i nie są tak zaimplementowane. Ma to na celu jedynie wykazanie podobnego zachowania.

const chroni przed ponownym przypisaniem wartości referencji w tym samym zakresie.

Z MDN

Nie oznacza to, że wartość, którą posiada, jest niezmienna, po prostu nie można przypisać identyfikatora zmiennej.

Również

Stała nie może dzielić swojej nazwy z funkcją lub zmienną w tym samym zakresie.

Po wywołaniu setCount składnik jest ponownie wysyłany, a nowe wywołanie useState zwraca nową wartość. Chodzi o to, że liczba jest niezmienna. Więc nie ma tu literówki.

Technicznie jest to nowa zmienna przy każdym renderowaniu.

Źródło: React Github problem: Dokumenty - Haki: czy to literówka?

tutaj odkryłem, że const był frustrujący, ponieważ liczba musi się zmienić

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