import React, { useState } from "react";

function HookCounter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Count {count}</button>
    </div>
  );
}

export default HookCounter;

React calls this function every time when it needs to re-render.

But why doesn't it initialize the state every time?

When exit the function, life of variables is ended, isn't it?

But how does it keep saving values of states?

I don't understand.

In useState function, is there any logic for that?

import React, { useState } from "react";

function HookCounter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Count {count}</button>
    </div>
  );
}

export default HookCounter;

React calls this function every time when it needs to re-render.

But why doesn't it initialize the state every time?

When exit the function, life of variables is ended, isn't it?

But how does it keep saving values of states?

I don't understand.

In useState function, is there any logic for that?

• javascript
• reactjs
• react-hooks

• 4 Hooks aren't vanilla functions, they're magical. useState stores values internally in react's core, and passes updated, not initial, values back to your ponent when the render function is executed again – Andy Ray Commented Nov 7, 2019 at 18:28
• 1 The initialization is done just once. It runs on every render, but the result is disregarded. You can also pass a function to initialize the state, this one runs just once. const[s,setter] = useState(() => 3). reactjs/docs/hooks-reference.html#lazy-initial-state – Dupocas Commented Nov 7, 2019 at 18:29
• Outside the function? I don't see using count in another ponent. It's only available in that ponent unless you pass them. – Bhojendra Rauniyar Commented Nov 7, 2019 at 18:30
• 3 @AndyRay not magical, but they're definitely not pure. The implementation relies on relative ordering of hook calls within a ponent in order to propagate state between passes. – Patrick Roberts Commented Nov 7, 2019 at 18:35
• 1 @AndyRay you can certainly nest them... otherwise custom hooks would not be possible. All that matters is that the relative ordering of calls within a ponent to the React-provided hooks remains the same for all renders. Here's a very simplified pseudo-implementation of how hooks work under the hood. – Patrick Roberts Commented Nov 7, 2019 at 18:46

4 Answers 4

useState as a function is storing the value you gave it within React's core. When the ponent re-renders, React is going to pass the updated count from its core to the ponent.

More information here.

State is initialized only once when you create the ponent, this is how React works. From the documentation:

What does calling useState do? It declares a “state variable”. Normally, variables “disappear” when the function exits but state variables are preserved by React.

Just to have the context here, let me summarize what is useState and how it works in more details.

What is useState:

So useState is a hook which helps you to handle state in a functional ponent.

How is it working?

Once you call useState you need to pass the initial value of the state what you would like to use in your functional ponent. It returns a pair of values the count and setCount.

So let's have your example below:

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

So useState returned two items where count is the current value. And the second item, setCount is a function which can be used to update the value of the count state.

count can be used to represent the state for example the value in a div element:

return (
   <div>{count}</div>
)

In order to update the value you can achieve by calling setState(12).

From the docs you can read further here.

According to the React official website:

React keeps track of the currently rendering ponent. Thanks to the Rules of Hooks, we know that Hooks are only called from React ponents (or custom Hooks — which are also only called from React ponents).

There is an internal list of “memory cells” associated with each ponent. They’re just JavaScript objects where we can put some data. When you call a Hook like useState(), it reads the current cell (or initializes it during the first render), and then moves the pointer to the next one. This is how multiple useState() calls each get independent local state.

Reference:

How does React associate Hook calls with ponents?

Why doesn't useState function initialize State every time?

I think you're confused with:

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

As it's just a variable!?!

Yes, it's just a variable but it will take everytime the function runs from the useState hook. And it is the local state like you have seen in class based ponent.