Why React Hook useState uses const and not let

by

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

Note: Hooks are way more sophisticated and are not actually implemented like this. This is just to demonstrate a similar behavior.

More Related Contents:

  1. React useState hook event handler using initial state
  2. What do multiple arrow functions mean in JavaScript?
  3. Arrow function without curly braces
  4. Why shouldn’t JSX props use arrow functions or bind?
  5. React useEffect in depth / use of useEffect?
  6. Is useState synchronous? [duplicate]
  7. React hooks – right way to clear timeouts and intervals
  8. React Hooks useState() with Object
  9. React Native: require() with Dynamic String?
  10. Concatenating variables and strings in React
  11. React functional stateless component, PureComponent, Component; what are the differences and when should we use what?
  12. What is the difference between using constructor vs state = {} to declare state in react component?
  13. Multiple calls to state updater from useState in component causes multiple re-renders
  14. What’s the difference between `useRef` and `createRef`?
  15. Active link with React-Router?
  16. Arrow functions and the use of parentheses () or {} or ({})
  17. What does calling super() in a React constructor do?
  18. How to change the value of a Context with useContext?
  19. ES6 functions, arrow functions and ‘this’ in an ES6 class [duplicate]
  20. How to prevent re-rendering of components that have not changed?
  21. How target DOM with react useRef in map
  22. How to programmatically clear/reset React-Select?
  23. React Hooks Error: Hooks can only be called inside the body of a function component
  24. map function not working in React
  25. Why can’t React Hooks be called inside loops or nested function?
  26. How to set initial state for useState Hook in jest and enzyme?
  27. React cannot read property map of undefined
  28. useMemo vs. useEffect + useState
  29. Updating state to the same value directly in the component body during render causes infinite loop
  30. React Hooks render twice

Leave a Comment