Menu
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?
223
Hooks make React so much better because you have simpler code that implements similar functionalities faster and more effectively. You can also implement React state and lifecycle methods without writing classes.
React calls your component for the first time. React finds a call to useState , creates a new Hook object (with the initial state), changes the current Hook variable to point to this object, adds the object to the Hooks list, and return the array with the initial state and the function to update it.
TL;DR: useState is an asynchronous hook and it doesn't change the state immediately, it has to wait for the component to re-render. useRef is a synchronous hook that updates the state immediately and persists its value through the component's lifecycle, but it doesn't trigger a re-render.
The answer: They're just queues setState , and React. useState create queues for React core to update the state object of a React component. So the process to update React state is asynchronous for performance reasons. That's why changes don't feel immediate.
useState is a React hook for managing components rendering. The hook can be used inside each component which needs to be updated and re-rendered according to its state changes. useState hook is a method that accepts just one argument which is an initial state. A function that returns initial state (using for a more complex way of its defining).
In React Hooks with a Functional Component, your code gets a single value of state for each call into your functional component. React handles the storage separately and returns that current value via useState on each execution of your code, providing the latest state value.
Normally, const is used on variables that won't be changing. Here, someBooleanValue will be changing. What is going on that allows us to use the const keyword in this case? Show activity on this post. In React Hooks with a Functional Component, your code gets a single value of state for each call into your functional component.
It's not exactly assigning a new value. useState is simply a state updating function. Const is used here because the change of value is being managed somewhere else by React. You're telling React to manage some value for you by calling useState.
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 rerenderNote: Hooks are way more sophisticated and are not actually implemented like this. This is just to demonstrate a similar behavior.
173
const is a guard against reassigning the value of the reference within the same scope.
From MDN
It does not mean the value it holds is immutable, just that the variable identifier cannot be reassigned.
Also
A constant cannot share its name with a function or a variable in the same scope.
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
