The standard way to use a React useState Hook is the following:
const [count, setCount] = useState(0);
However this const count
variable is clearly going to be reassigned to a different primitive value.
Why then is the variable not defined as let count
?
clearly going to be reassigned to a different primitive value
Not really. When the component is rerendered, the function is executed again, creating a new scope, creating a new count
variable, which has nothing to do with the previous variable.
Example:
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