javascript - ¿Por qué usar React Hook? State usa const y no permite

reactjs ecmascript-6

Question

La forma estándar de usar un React useState Hook es la siguiente:

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

Sin embargo, esta variable de const count claramente se reasignará a un valor primitivo diferente.

¿Por qué entonces la variable no está definida como let count ?

Answer 1

Después de llamar a setCount, el componente se vuelve a procesar y la nueva llamada de useState devuelve el nuevo valor. El punto es que la cuenta es inmutable. Entonces no hay error tipográfico aquí.

Técnicamente es una nueva variable en cada render.

Fuente: React Github issue: Docs - Hooks: ¿es eso un error tipográfico?

Answer 2

claramente va a ser reasignado a un valor primitivo diferente

Realmente no. Cuando el componente se vuelve a procesar, la función se ejecuta nuevamente, creando un nuevo ámbito, creando una nueva variable de count , que no tiene nada que ver con la variable anterior.

Ejemplo:

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: Los ganchos son mucho más sofisticados y en realidad no se implementan de esta manera. Esto es solo para demostrar un comportamiento similar.

Answer 3

const es una protección contra la reasignación del valor de la referencia dentro del mismo alcance.

De MDN

No significa que el valor que posee es inmutable, solo que el identificador de variable no se puede reasignar.

también

Una constante no puede compartir su nombre con una función o una variable en el mismo ámbito.