Is there a difference between storing a const value in a variable vs in state?

Question

I've noticed a couple of ways of achieving seemingly the same thing inside a React functional component. When you have what is essentially a config value that is only needed inside this component (Just a constant value, never passed in or modified) You could just use a regular const or you could store it in the component's state.

Standard variable:

function Example1() {
  const a = 1
  return <div>{ a }</div>
}

Stored in state:

function Example2() {
  const [a] = useState(1)
  return <div>{ a }</div>
}

I get the impression that behind the scenes this would lead to Example1 creating a variable on each render and then disposing of it, while Example2 will create the variable once and maintain it until the component is unloaded. Is that accurate? And is one of these methods preferable in terms of performance/good practice?

Answer 1

Is that accurate?

Yes, as you said, Example1 creates a variable on each render (marking it as "disposable" in the end of the scope - not related to React but Javascript), Example2 creates the variable once and maintains it until the component is unmounted (or the state of this variable changes via setState).

And is one of these methods preferable in terms of performance/good practice?

As a good practice - Example1.

As for performance, it should be Example1. Example2 runs useState and compares the value a with the previous state on every render which is "much more expensive" than declaring a variable.

A better example will be comparing component reference/memoized variable vs. variable (Example1):

function Example2() {
  const a = useRef(1);
  const b = useMemo(() => 1, []);
  return <div>{a.current} , {b}</div>
}

But the answer remains almost the same.

Seeing such code indicates that the ref a might change. The use of useMemo indicates that b is a "heavy computation" variable, if not, it's just an overhead (same explanation as above) and better use Example 1.