Docs - Hooks: is that `const` a typo ?

The very first example of the hoks-intro shows the following code:

import { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

but since that count is theoretically (and visually) scoped within Example as const, I wonder how that is supposed to work (I mean, ever showing anything different from 0) or if there is a typo so that the first line should be instead:

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

Thanks for clarifying and/or fixing that very first example.

[TrySound]

@WebReflection After calling setCount the component is rerendered and the new call of useState returns the new value. The point is that count is immutable. So there’s no typo here.

[pluma]

I may be entirely wrong and this may do more harm than good but as far as I understand it, the handwave-y explanation seems to go something like this:

Unlike what you may have been told to imagine, <Component/> is not really as straightforward as Component(). While the component function is at some point invoked and its return value is at some point applied to the component tree, there’s this entire lifecycle thing going on and to do that React already keeps a lot of state around for each component.

As an aside, one example of that state is apparently the “local” state class-based components expose via this.state and this.setState. In other words, while they’re exposed in the class as instance properties, they’re not really “controlled” by the instance, which is why you’re supposed to use this.setState (which btw may take effect asynchronously, which is why it provides a callback form if you need to access the current state to derive the new state).

Because the component function isn’t invoked directly by the user but instead invoked “by React” (somehow), React knows in advance when a function will be invoked and thus can provide “global” functions (namely the use* hooks) that are aware of the current rendering context.

Because JS is single-threaded (as far as this part is concerned) and component functions always execute synchronously, hooks can be recognised by their execution order (assuming you follow the rules and always put them at the start of the function and never invoke them in conditionals).

So the reason you’re getting a constant value (and why there’s no point in modifying it even though you could) is that you’re not actually receiving the “state object”, you’re receiving the state’s current value, and a callback to assign a new value. The state itself lives outside the function (in the rendering context). That part takes some getting used to but it’s how the state “persists” across multiple invocations of the component function for the same component instance (i.e. on rerenders).

tl;dr: useState hooks into the component tree’s local context in which the component is rendered; the state it creates lives in that context, the function just returns a setter and the current value at the time the component function is invoked.

(if this turns out to be completely wrong, let’s pretend I’m just following Cunningham’s Law)