React Hooks State update one step behind. For this reason my changes are not working correctly

user_10767143 0
Viewed 2774

I want to see the changes in the use of react hooks on state immediately. My changes are one step behind on state. How can I solve this.

const [categoryID, setCategoryID] = useState(0);

const changeCategory = (e) => {
    setCategoryID(e.target.value);
    console.log(categoryID);
  };

<Field
     as="select"
     onChange={changeCategory}
     style={formStyle().inputStyle}
     className="form-control"
     type="text"
     name="categoryID"
      >

When I select the first value, the result appears 0. If I chose my second value, I see the value I chose first on the console.

react-hooks reactjs html javascript
2 Answers

The main reason behind this behavior is setState is asynchronous so the changes should not be expected immediately.

Specially for this cases there is a hook called useEffect() to capture changes on state. If you add categoryId into the dependency array of useEffect then it will be trigger once you have change on that state. Thus you can log your changes as the following:

useEffect(() => {
   console.log('changed', categoryID);
}, [categoryID]);

Suggested read is Using the Effect Hook.

user_75995100

State change is asynchronous in react hooks hence there is no guarantee that the state will be updated just after setting it. For this reason we have useEffect to the rescue that accepts a dependency and will be executed after that dependency is changed.

Example-

useEffect(() => {
  console.log(categoryID);
},[categoryID])

Now in this case the dependency is categoryID and whenever it's value is changed the function will be executed and will console the updated value.

user_91690910
Related