CODEWITHSUNDEEP
javascriptreactjsreact-hooksreact-functional-component
DBS
DBS

Reputation: 9984

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

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?

Upvotes: 8

Views: 7812

Answers (3)

Rajesh
Rajesh

Reputation: 24925

Keeping focus of this answer on when to use what.

Basic concept,

  • If you need to watch on a value and react on it, storing it in state makes sense.
  • If you just wants to store a value for display/calculation purpose, using a const/let is more appropriate.

Now in your second example

const [a] = useState(1)

This line of code is straight up wrong. Thats because you are adding a watcher but not accepting the setter callback.

Example1 creating a variable on each render

Yes this is correct. In Example2, it creates 1 variable, however, a state in React is immutable. That means, every render, the entire object is copied to a temp variable, destroyed and created again. Due to this fact, its adviced not to store huge objects in state as it will have adverse effect on your performance.

Upvotes: 5

Dennis Vash
Dennis Vash

Reputation: 53884

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.

Upvotes: 10

Daniele_s
Daniele_s

Reputation: 116

Your assumption is almost right, with useState the variable is create once and reused on every render.

However, the main difference is that modifying a variable created with useState (via its setter method) triggers a component refresh.

If you just need to save a value between renderings you should use other hooks, e.g. useRef, useCallback or useMemo

Upvotes: 1

Related Questions