Pourquoi React Hook useState utilise const et not let

La manière standard d'utiliser un crochet React useState est la suivante:

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

Cependant, cette const countvariable va clairement être réaffectée à une valeur primitive différente.

Pourquoi alors la variable n'est-elle pas définie comme let count?

va clairement être réaffecté à une valeur primitive différente

Pas vraiment. Lorsque le composant est restitué, la fonction est exécutée à nouveau, créant une nouvelle étendue, créant une nouvelle countvariable, qui n'a rien à voir avec la variable précédente.

Exemple:

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

Remarque: les crochets sont beaucoup plus sophistiqués et ne sont pas réellement implémentés comme ça. C'est juste pour démontrer un comportement similaire.

const évite de réaffecter la valeur de la référence dans le même domaine.

Depuis MDN

Cela ne signifie pas que la valeur qu'il contient est immuable, mais simplement que l'identificateur de variable ne peut pas être réaffecté.

Aussi

Une constante ne peut pas partager son nom avec une fonction ou une variable dans la même étendue.

Après avoir appelé setCount, le composant est restitué et le nouvel appel de useState renvoie la nouvelle valeur. Le fait est que le compte est immuable. Il n'y a donc pas de faute de frappe ici.

Techniquement, c'est une nouvelle variable à chaque rendu.

Source: React Github issue: Docs - Hooks: est-ce que c'est une faute de frappe?

ici, j'ai trouvé que const était frustrant car le nombre doit changer afin

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