Using react hooks

Question

While trying to understand React hooks, i wrote this small code:

import React, {useState} from "react";
import "./styles.css";

export default function App(props) {
  var [x, setX] = useState(0);

  function handleClick(e) {
    setX(x++);

    console.log(x);
  }

  return(<div className="App">
    <h3 className="h"> Welcome user, please press this button:</h3>   
    {x}
    <br/>
    <button className='button' onClick={handleClick}> Click </button>
  </div>);
}

I was expecting to get output 1 2 3 4 5 6... in console whenever i press the button, but i got this weird output instead 1 2 2 3 3 4 4 5 5 6 6 .

Can someone explain why we get such output and how to fix it ?

I have answered a similar question some time ago: stackoverflow.com/questions/59495222/cant-setstate-in-reactjs/…. Basically, setting of state is asynchronous, thats why logging the state right after setX might result in 'older' values. — wentjun
– wentjun, Commented May 3, 2020 at 11:59
I don't see how you are getting duplicated values with only one console.log in your code like this - are you sure you can reproduce your problem with the code listed? (and yes, neither modifying x nor console.log after setX do not make sense, but those are separate problems that wouldn't duplicate the output) — Aprillion
– Aprillion, Commented May 3, 2020 at 12:06
I also don't know how i got duplicated values, but when i tried Antoni's answer, the problem was fixed ! I will now try to understand more what caused that behavior. — Moody
– Moody, Commented May 3, 2020 at 12:35

Antoni Silvestrovič · Accepted Answer · 2020-05-03 12:15:45Z

1

You're modifying x with x++ command and then setting it again. You need to do something like this in the handleClick function:

setX(x + 1);

console.log(x);

The reason is that x++ is equivalent to x = x + 1 not x + 1.

Bonus tip:

Use const instead of var so that the interpreter warns you about modifying an immutable value.

edited May 3, 2020 at 12:15

answered May 3, 2020 at 12:00

Antoni Silvestrovič

1,0579 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Aprillion Over a year ago

it does not make sense to console.log after setX - stackoverflow.com/a/58877875/1176601

Antoni Silvestrovič Over a year ago

yes, the x inside the console.log will print the previous value, you could save the x+1 into a variable and print that, since setX is pretty much guaranteed to set the state

Moody Over a year ago

I just added console.log for debugging purpose, now i will delete it.

Utsav Patel · Accepted Answer · 2020-05-03 12:38:30Z

0

You can also pass a callback function to your setX function.

This will ensure, that while doing computations, you will always have the previous value within the callback.

This is because setX is an async function.

You can do like so :

  function handleClick(e) {
    setX(previousCount => previousCount + 1);
    console.log(x);
  }

Working implementation attached.

answered May 3, 2020 at 12:38

Utsav Patel

2,9171 gold badge19 silver badges27 bronze badges

Collectives™ on Stack Overflow

Using react hooks

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related