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




reactjs ecmascript-6 (2)

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

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

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

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



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 variável de count , 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.





react-hooks