Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why doesn't useState function initialize state every time?

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?

like image 287
Hanseongguk Avatar asked Nov 07 '19 18:11

Hanseongguk


People also ask

Can useState initialize state from a function?

useState is a Hook (function) that allows you to have state variables in functional components. You pass the initial state to this function and it returns a variable with the current state value (not necessarily the initial state) and another function to update this value.

Why does the React useState hook not update immediately?

The answer: They're just queues setState , and React. useState create queues for React core to update the state object of a React component. So the process to update React state is asynchronous for performance reasons. That's why changes don't feel immediate.

Does useState always re-render?

Let's take a step back, pause for a moment, and think about what useEffect and useState actually do. Changing state will always cause a re-render. By default, useEffect always runs after render has run.

How do I change my initial state of useState?

To set a conditional initial value for useState in React: Pass a function to the useState hook. Use a condition to determine the correct initial value for the state variable. The function will only be invoked on the initial render.


3 Answers

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

More information here.

like image 91
KaratemanJohnson Avatar answered Oct 14 '22 12:10

KaratemanJohnson


According to the React official website:

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

There is an internal list of “memory cells” associated with each component. 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 components?

like image 43
Mohammad Barbast Avatar answered Oct 14 '22 12:10

Mohammad Barbast


State is initialized only once when you create the component, 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 component.

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 component. 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.

like image 31
norbitrial Avatar answered Oct 14 '22 12:10

norbitrial