Mengapa React Hook useState menggunakan const dan tidak membiarkan

Cara standar untuk menggunakan Hook React useState adalah sebagai berikut:

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

Namun const countvariabel ini jelas akan dipindahkan ke nilai primitif yang berbeda.

Lalu mengapa variabel tidak didefinisikan sebagai let count?

jelas akan dipindahkan ke nilai primitif yang berbeda

Tidak juga. Ketika komponen di-rendendered, fungsi dieksekusi lagi, membuat ruang lingkup baru, membuat countvariabel baru , yang tidak ada hubungannya dengan variabel sebelumnya.

Contoh:

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

Catatan: Kait jauh lebih canggih dan tidak benar-benar diterapkan seperti ini. Ini hanya untuk menunjukkan perilaku yang serupa.

const adalah penjaga terhadap penugasan kembali nilai referensi dalam lingkup yang sama.

Dari MDN

Itu tidak berarti nilai yang dipegangnya tidak berubah, hanya saja pengenal variabel tidak dapat dipindahkan.

Juga

Konstanta tidak dapat membagikan namanya dengan fungsi atau variabel dalam cakupan yang sama.

Setelah memanggil setCount, komponen di-rerendered dan panggilan baru useState mengembalikan nilai baru. Intinya adalah bahwa hitungan tidak berubah. Jadi tidak ada salah ketik di sini.

Secara teknis itu adalah variabel baru di setiap render.

Sumber: Bereaksi masalah Github: Documents - Hooks: apakah itu const typo?

di sini saya menemukan bahwa const frustasi karena hitungan perlu diubah begitu

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