React Hook useStateがconstを使用し、letしない理由

React useStateフックを使用する標準的な方法は次のとおりです。

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の問題：ドキュメント-フック：誤字脱字ですか？

ここでは、カウントを変更する必要があるため、constがイライラしていることがわかりました。

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