Por que o React Hook useState usa const e não permite


33

A maneira padrão de usar um gancho React useState é a seguinte:

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

No entanto, essa const countvariável será claramente atribuída a um valor primitivo diferente.

Por que então a variável não é definida como let count?


5
Se você alterar o estado, o componente será claramente renderizado novamente, certo? Então, se ele voltar a torna contagem nunca será "transferido"
Kevin.a

3
De fato, no escopo da função, a contagem permanece imutável. Obrigado Kevin!
Nacho

Respostas:


46

claramente será reatribuído para um valor primitivo diferente

Na verdade não. Quando o componente é renderizado novamente, a função é executada novamente, criando um novo escopo, criando uma nova countvariável, que nada tem a ver com a variável anterior.

Exemplo:

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

Nota: Os ganchos são muito mais sofisticados e não são realmente implementados assim. Isso é apenas para demonstrar um comportamento semelhante.


2

const é uma proteção contra a reatribuição do valor da referência dentro do mesmo escopo.

Do MDN

Isso não significa que o valor que ele possui seja imutável, apenas que o identificador da variável não pode ser reatribuído.

Além disso

Uma constante não pode compartilhar seu nome com uma função ou variável no mesmo escopo.


11
Os valores primitivos são imutáveis, portanto, a questão é mais sobre como explicar como um número const pode mudar?
Fred Stark


0

aqui eu achei que const era frustrante, já que a contagem precisa mudar, então

  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
  };
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.