How to write react code with settimeout correctly?

Question

I have the next code:

const Button = () => {
  const [numbers, setNumbers] = useState({
    a: 10,
    b: 30,
    c: 100,
    d: new Date()
  });

  const click = () => {
    setTimeout(click2, 2000);
  };

  const click2 = () => {
    setNumbers({
      a: numbers.a + 1,
      b: numbers.b + 1,
      c: numbers.c + 1,
      d: new Date()
    });
  };

  return (
    <>
      <button onClick={click}>+</button>
      <p>{numbers.a}</p>
      <p>{numbers.b}</p>
      <p>{numbers.c}</p>
      <p>{numbers.d.toLocaleString()}</p>
    </>
  );
};

When I press the button once, the code works correctly. But if I press the button twice in a row, the code will only run once. Please explain why this is happening and how to make the code run every time you click it?

Sumanth Madishetty · Accepted Answer · 2022-03-09 15:30:37Z

1

It's because click2 function will have the old state value itself when clicked the second time as the setState of the first click is not run yet, Instead of referencing statevalue directly use prevState method of setting state, according to that change your click2 function as below

    setNumbers((num) => {
      return {
        a: num.a + 1,
        b: num.b + 1,
        c: num.c + 1,
        d: new Date()
      };
    });
  };

Please refer this codesandbox for reference

answered Mar 9, 2022 at 15:30

Sumanth Madishetty

3,5952 gold badges16 silver badges24 bronze badges

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

Collectives™ on Stack Overflow

How to write react code with settimeout correctly?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related