Skip to content
Related Articles

Related Articles

Improve Article

Does React useState Hook update immediately ?

  • Last Updated : 14 Jul, 2021
Geek Week

How we can use the useState hook in React?

The useState is an API/Hook introduced in the recent versions of React. As it is a hook it let us hook into the React feature and to be precise the state feature that react provides.

In the earlier releases of React, if we want to give a state to any component then we need to convert that component into the class-based component, but with useState hook, we can give a state in our functional component. However, the useState hook can not be used in a class and should not be used in normal JavaScript functions for full-proof usage. We use the useState hook as follows and extract the state and function that update the state. The only thing that useState requires is the initial state.

How hook updates work?

React keep track of the states by queuing them in the order they are called. React queue all the changes to be made and update once the component Re-render which is not immediate. So that is how React knows which value corresponds to which state. It goes as per the queue every time the component tries to re-render.



Creating React Application:

  • Step 1: Create a React application using the following command:

    npx create-react-app foldername
  • Step 2: After creating your project folder i.e. foldername, move to it using the following command:

    cd foldername

Project Structure: It will look like the following.

Project Structure

Filename: App.js

App.js




import React, { useState } from "react"
  
export default function App() {
  
  // State for username
  const [name, setName] = useState("jon doe");
  
  // Function to change name
  function changeName(e) {
    setName(e.target.value);
  }
  
  return (
    <div>
      <h1>Your agent name is :</h1>
      <h2>{name}</h2>
      <input value={name} onChange={changeName} ></input>
      <button>change</button>
    </div>
  )
}

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Explanation: As you can see to update the state we have used the method setState, which is extracted from the hook useState. So to update we have not used this.name or anything like this.setname

You might be wondering if there is no class-based component or this involved how does react know that we are referring to which state as there will be so many states in the code like below:

const [name, setName] = useState("jon");
const [sername, setSername] = useState("doe");
const [age,setAge] = useState(23);

React do not update immediately, although it seems immediate at first glance. React keep track of the states by queuing them in the order they are called. React queue all the changes to be made and update once the component Re-render which is not immediate. This is how React knows which value corresponds to which state. It goes as per the queue every time the component tries to re-render.

Example: If our component updates the state in some order like name, sername and age, then it put those changes on the queue and do not update those state immediately as they encountered. Once the functional component ends it re-render the component and updates the state in the order in which it put them in the queue. This way React keeps the integrity of the state and lets us use the state in our functional component using the useState hook. 

setName("James");    // First state on queue
setSername("Bond");     // Second state on queue
setAge(23);             // Third state on queue

// End of the component function

// After that re-render happens and state actually updates

References: https://reactjs.org/docs/hooks-rules.html




My Personal Notes arrow_drop_up
Recommended Articles
Page :